Warum funktioniert die Funktion „clearInterval()“ nicht?

Question

Ich bin JavaScript-Neuling und habe Probleme mit diesem Skript.Es ist Teil eines Webspiels und das Skript soll die Seite aktualisieren, bis der Spieler gewinnt oder verliert.Aus irgendeinem Grund hört die Aktualisierung nicht auf. Ich habe eine Warnfunktion eingerichtet, um zu überprüfen, ob die Funktion funktioniert. Ich erhalte die Warnmeldungen, aber die Aktualisierung der Seite wird trotzdem fortgesetzt.Was mache ich falsch?

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

Sie müssen den Verweis auf korrigieren self und das Problem beheben .load() Anruf.

.load() ist asynchron und wird daher nicht vor dem Aufruf abgeschlossen youWin() Und youLose() direkt danach.Sie benötigen eine Vervollständigungsfunktion, damit Sie nach dem Gewinn oder Verlust überprüfen können .load() wird erfolgreich abgeschlossen.

refreshData() sollte wie folgt aufgebaut sein:

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

Sie sollten dies auch ändern:

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

dazu:

t = window.setInterval(refreshData, 10000);

Das sehe ich nicht self wurde sogar so definiert, dass dies auch Ihr Problem verursacht haben könnte und Sie sollten die Funktionsreferenz direkt verwenden, anstatt sie in eine Zeichenfolge einzufügen.

Und als Bereinigungsproblem sollten Sie beide Vorkommen davon ändern:

t = clearInterval(t);

dazu:

clearInterval(t);

Hier ist eine bereinigte Version des Codes, die auch globale Variablen und unnötige Funktionsdefinitionen entfernt:

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

});