Pourquoi clearInterval() ne fonctionne-t-il pas ?

Question

Je suis nouveau sur JavaScript et j'ai des problèmes avec ce script.cela fait partie d'un jeu Web et le script est censé actualiser la page jusqu'à ce que le joueur gagne ou perde.pour une raison quelconque, l'actualisation n'arrête pas, j'ai mis une fonction d'alerte pour vérifier si les fonctions fonctionnent, et je reçois les alertes mais la page continue d'être actualisée.Qu'est-ce que je fais mal?

var t;

$(document).ready(function () {
    intervals();
});
function intervals() {
    t = self.setInterval('refreshData()', 10000);
}
function youWin() {
    var f = $('#status:contains("YOU ARE THE WINNER!")');
    if (f.length > 0) {
        alert("YOU ARE THE WINNER!");
        t = clearInterval(t);
    }
}
function youlose() {
    var f = $('#status:contains("You lost!")');
    if (f.length > 0) {
        alert("You lost!");
        t = clearInterval(t);
    }
}
function refreshData() {
    $('#ajaxGame').load('RefreshCurrentPlayerServlet #ajaxGame');
    youWin();
    youlose();
}

Answer 1

Vous devez corriger la référence à self et réparer le .load() appel.

.load() est asynchrone donc il ne se termine pas avant votre appel youWin() et youLose() juste après.Vous avez besoin d'une fonction d'achèvement pour pouvoir vérifier si vous avez gagné ou perdu après le .load() se termine avec succès.

refreshData() devrait être structuré comme ceci:

function refreshData() {
    $('#ajaxGame').load('RefreshCurrentPlayerServlet #ajaxGame', function() {
        youWin();
        youlose();
    });
}

Vous devriez également modifier ceci :

t= self.setInterval('refreshData()',10000);

pour ça:

t = window.setInterval(refreshData, 10000);

je ne vois pas ça self a même été défini, ce qui aurait pu également être à l'origine de votre problème et vous devriez utiliser la référence de fonction directement plutôt que de la mettre dans une chaîne.

Et, en tant que problème de nettoyage, vous devez modifier les deux occurrences de ceci :

t = clearInterval(t);

pour ça:

clearInterval(t);

Voici une version nettoyée du code qui élimine également les variables globales et les définitions de fonctions inutiles :

$(document).ready(function() {
    var t = window.setInterval(function() {
        $('#ajaxGame').load('RefreshCurrentPlayerServlet #ajaxGame', function() {
            youWin();
            youlose();
        });
    }, 10000);

    function youWin()  {
        if ($('#status:contains("YOU ARE THE WINNER!")').length) {
            alert("YOU ARE THE WINNER!");
            clearInterval(t);
        }
    }

    function youlose() {
        if ($('#status:contains("You lost!")').length) {
            alert("You lost!");
            clearInterval(t);
        }
    }

});