Méthode de traitement de rafraîchissement en temps réel Ajax-js tutoriel-php.cn

Méthode de traitement de rafraîchissement en temps réel Ajax

一个新手

Libérer： 2017-10-24 10:30:28

original

1263 Les gens l'ont consulté

En tant qu'ancien front-end, ce cas est écrit sur la base de jquery.

La page de rendu front-end pour obtenir des données n'est rien de plus que ajax et socket. Les autres n'ont pas encore été utilisés, mais le projet utilise toujours davantage ajax.

Jetons un coup d'œil à une requête simple basée sur un sondage court ajax

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);

Copier après la connexion

Si la vitesse du réseau est rapide et stable, vous pouvez l'utiliser comme ça, mais qui peut en être sûr la vitesse du réseau ? Si la vitesse est instable, il faudra 5 à 10 secondes pour demander une interface. Cela entraînera un empilement des requêtes ajax et des problèmes incommensurables. Alors, comment éviter ce problème ?

Méthode 1 : attribuer une variable à la requête, puis abandonner une requête à chaque fois qu'elle est interrogée

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);

Copier après la connexion

À première vue, cela semble correct, presque OK, mais comme devant -fin, nous devons constamment rechercher des méthodes plus adaptées, voici donc celle ci-dessous.

Méthode 2 : Chaque interrogation détermine si la requête précédente est terminée, et la requête suivante ne sera exécutée qu'une fois terminée (recommandé)

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);

Copier après la connexion

Le ci-dessus isLoaded && req({"init": 0}); signifie que la condition précédente est correcte, alors la méthode après && est exécutée

La méthode d'écriture normale est

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

Copier après la connexion

Une autre remarque : isLoaded=true doit être ajoutée au complet , si elle réussit seulement. Dans le cas de Riga, si la demande échoue, elle ne sera pas interrogée ni demandée à nouveau. complete s'exécutera

quel que soit le succès ou l'erreur. Merci de votre attention ~