Venez voir le traitement d'actualisation en temps réel d'Ajax

Tutoriel ajaxIntroduction aux colonnes du traitement d'actualisation en temps réel

Recommandé (gratuit) : tutoriel ajax (vidéo)

En tant qu'ancien front-end, ce cas est écrit basé sur 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 être sûr du réseau Si la vitesse du réseau n'est pas stable, 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 en tant que front-end Nous devons constamment rechercher des moyens plus adaptés, voici donc celui ci-dessous.

Méthode 2 : Chaque interrogation détermine si la demande précédente est terminée, et la demande 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);

Ce qui précède 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});

Une autre remarque : isLoaded=true doit être ajoutée au complet si c'est le cas. ajouté uniquement en cas de succès, demande. En cas d'échec, il ne sera pas interrogé ni demandé à nouveau. complete s'exécutera

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

Recommandations d'apprentissage gratuites associées : javascript(vidéo)

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!