Heim > Web-Frontend > js-Tutorial > Hauptteil

Implementierungsmethode der Ajax-Echtzeit-Aktualisierungsverarbeitung

一个新手
Freigeben: 2017-10-26 10:29:58
Original
4259 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: 'get',
        url: 'demo.php',
        dataType: 'json',
        success: function(res) {
            console.log(res);
        },
        error: function() {
            console.log('请求失败~');
        }
    });
}
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? die Netzwerkgeschwindigkeit? Wenn die Geschwindigkeit instabil ist, dauert es 5 bis 10 Sekunden, bis eine Schnittstelle angefordert wird. Dies führt dazu, dass sich Ajax-Anfragen häufen, 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: '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);
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: '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);
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 vonImplementierungsmethode der Ajax-Echtzeit-Aktualisierungsverarbeitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage