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

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: 'get',
        url: 'demo.php',
        dataType: 'json',
        success: function(res) {
            console.log(res);
        },
        error: function() {
            console.log('请求失败~');
        }
    });
}
req();
setInterval(req, 3000);

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

À 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: '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);

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

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~

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!