Perché funziona Clearinterval ()?

Question

Sono nuovo a JavaScript e sto avendo problemi con questo script. Fa parte di un web game e lo script dovrebbe aggiornare la pagina finché il giocatore non vince o perde il giocatore. Per qualche motivo non smette di rinfrescare, ho messo una funzione di avviso per verificare se le funzioni funzionano, e ottengo gli avvisi ma continua a rinfrescare la pagina. Cosa sto facendo male?

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

È necessario correggere il riferimento a self e fissare la chiamata .load().

.load() è asincrono in modo da non completare prima di chiamare youWin() e youLose() subito dopo di esso. È necessaria una funzione di completamento in modo da poter controllare vincere o perdere dopo che il .load() è stato completato correttamente.

refreshData() dovrebbe essere strutturato come questo:

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

.

Dovresti anche cambiarlo:

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

.

A questo:

t = window.setInterval(refreshData, 10000);

.

Non vedo che self è stato anche definito in modo che avrebbe potuto anche causare il problema e dovresti usare il riferimento della funzione direttamente piuttosto che mettere in una stringa.

E, come problema di pulizia, è necessario modificare entrambi i verificarsi di questo:

t = clearInterval(t);

.

A questo:

clearInterval(t);

.

Ecco una versione pulita del codice che elimina anche variabili globali e definizioni di funzione non necessarie:

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

});

.