Ajax-Echtzeit-Aktualisierungsverarbeitungsmethode-js-Tutorial-php.cn

Ajax-Echtzeit-Aktualisierungsverarbeitungsmethode

一个新手

Freigeben： 2017-10-24 10:30:28

Original

1213 Leute haben es durchsucht

Als altes Frontend ist dieser Fall auf Basis von JQuery geschrieben.

Die Front-End-Rendering-Seite zum Abrufen von Daten ist nichts anderes als Ajax und Socket. Die anderen wurden noch nicht verwendet, aber das Projekt verwendet immer noch mehr Ajax.

Sehen wir uns eine einfache Anfrage an, die auf Ajax-Kurzabfragen basiert

function req() {
    $.ajax({
        type: &#39;get&#39;,
        url: &#39;demo.php&#39;,
        dataType: &#39;json&#39;,
        success: function(res) {
            console.log(res);
        },
        error: function() {
            console.log(&#39;请求失败~&#39;);
        }
    });
}
req();
setInterval(req, 3000);

Nach dem Login kopieren

Wenn die Netzwerkgeschwindigkeit schnell und stabil ist, können Sie sie so verwenden, aber wer kann sich dessen sicher sein? Wenn die Geschwindigkeit instabil ist, dauert die Anforderung einer Schnittstelle 5 bis 10 Sekunden. Dadurch häufen sich die Ajax-Anfragen, was zu unermesslichen Problemen führt.

Methode 1: Weisen Sie der Anfrage eine Variable zu und brechen Sie dann eine Anfrage jedes Mal ab, wenn sie abgefragt wird

var ajaxReq = null;
function req(isLoading) {
    if(ajaxReq !== null) {
        ajaxReq.abort();
        ajaxReq = null;
    }
    ajaxReq = $.ajax({
        type: &#39;get&#39;,
        url: &#39;demo.php&#39;,
        dataType: &#39;json&#39;,
        beforeSend: function() {
            if(isLoading) {
                $(&#39;.zh-loading&#39;).show();
            }
        },
        success: function(res) {
            console.log(res);
        },
        complete: function() {
            if(isLoading) {
                $(&#39;.zh-loading&#39;).hide();
            }
        },
        error: function() {
            console.log(&#39;请求失败~&#39;);
        }
    });
}
req(true);
setInterval(function() {
    req(false);
}, 3000);

Nach dem Login kopieren

Auf den ersten Blick fühlt es sich in Ordnung an, fast in Ordnung, aber wie vorne -Ende müssen wir ständig nach geeigneteren Methoden suchen, daher hier die folgende.

Methode 2: Bei jeder Abfrage wird ermittelt, ob die vorherige Anfrage abgeschlossen ist, und die nächste Anfrage wird erst ausgeführt, nachdem sie abgeschlossen ist (empfohlen)

var isLoaded = false;
function req(opts) {
    $.ajax({
        type: &#39;get&#39;,
        url: &#39;demo.php&#39;,
        dataType: &#39;json&#39;,
        beforeSend: function() {
            if(opts.init === 1) {
                $(&#39;.zh-loading&#39;).show();
            }
            isLoaded = false;
        },
        success: function(res) {
            console.log(res);
        },
        complete: function() {
            if(opts.init === 1) {
                $(&#39;.zh-loading&#39;).hide();
            }
            isLoaded = true;
        },
        error: function() {
            console.log(&#39;请求失败~&#39;);
        }
    });
}
req({"init": 1});
setInterval(function() {
    isLoaded && req({"init": 0});
}, 3000);

Nach dem Login kopieren

Die oben isLoaded && req({"init": 0}); bedeutet, dass die vorherige Bedingung korrekt ist, dann wird die Methode nach && ausgeführt

Die normale Schreibmethode ist

if(isLoaded) req({"init": 0});

Nach dem Login kopieren

Ein weiterer Hinweis: isLoaded=true sollte vollständig hinzugefügt werden , wenn die Anfrage nur erfolgreich ist. Wenn die Anfrage im Fall von Riga fehlschlägt, wird sie nicht abgefragt und erneut angefordert. „Complete“ wird

unabhängig von Erfolg oder Fehler ausgeführt. Vielen Dank für Ihre Aufmerksamkeit

Das obige ist der detaillierte Inhalt vonAjax-Echtzeit-Aktualisierungsverarbeitungsmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!