Méthode de mise en œuvre du traitement de rafraîchissement en temps réel ajax-js tutoriel-php.cn

Méthode de mise en œuvre du traitement de rafraîchissement en temps réel ajax

一个新手

Libérer： 2017-10-26 10:29:58

original

4266 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 avant -fin, nous devons constamment rechercher des méthodes plus adaptées, voici donc ce qui suit.

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, puis exécutez la méthode après &&

La méthode d'écriture normale est

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

Copier après la connexion

Une autre note : 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. C'est tout Merci de votre attention~

Méthode de mise en œuvre du traitement de rafraîchissement en temps réel ajax