Kommen Sie und werfen Sie einen Blick auf die Ajax-Echtzeit-Aktualisierungsverarbeitung

Ajax-TutorialSpalte führt in die Aktualisierungsverarbeitung in Echtzeit ein

Empfohlen (kostenlos): Ajax-Tutorial (Video)

As ein altes Frontend, das hier case basiert auf jquery Schreiben.

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.

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

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

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

Methode 1: Weisen Sie der Anfrage eine Variable zu und brechen Sie dann in jeder Umfrage eine Anfrage ab

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

Auf den ersten Blick fühlt es sich in Ordnung an, fast in Ordnung, aber als Front-End müssen wir ständig nach mehr suchen Das Passende So gibt es Folgendes.

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: 'get',
        url: 'demo.php',
        dataType: 'json',
        beforeSend: function() {
            if(opts.init === 1) {
                $('.zh-loading').show();
            }
            isLoaded = false;
        },
        success: function(res) {
            console.log(res);
        },
        complete: function() {
            if(opts.init === 1) {
                $('.zh-loading').hide();
            }
            isLoaded = true;
        },
        error: function() {
            console.log('请求失败~');
        }
    });
}
req({"init": 1});
setInterval(function() {
    isLoaded && req({"init": 0});
}, 3000);

Der obige isLoaded && req({"init": 0 } ); bedeutet, dass die vorherige Bedingung korrekt ist. Führen Sie dann die Methode nach && aus. Die normale Schreibweise lautet: isLoaded && req({"init": 0}); 表示前面一个条件正确，则执行&&后面的方法

正常的写法是

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

另外注意一点：isLoaded=truerrreee. 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. vollständig wird unabhängig von Erfolg oder Fehler ausgeführt

Der Code endet hier, vielen Dank für Ihre Aufmerksamkeit~

Verwandte kostenlose Lernempfehlungen: Javascript (Video)

Das obige ist der detaillierte Inhalt vonKommen Sie und werfen Sie einen Blick auf die Ajax-Echtzeit-Aktualisierungsverarbeitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!