¿Por qué no funciona clearInterval()?

Question

Soy nuevo en JavaScript y tengo problemas con este script.Es parte de un juego web y se supone que el script actualiza la página hasta que el jugador gana o pierde.Por alguna razón no deja de actualizarse, puse una función de alerta para verificar si las funciones funcionan y recibo las alertas, pero aún así continúo actualizando la página.¿Qué estoy haciendo 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

Necesitas arreglar la referencia a self y arreglar el .load() llamar.

.load() es asincrónico por lo que no se completa antes de llamar youWin() y youLose() justo después de eso.Necesita una función de finalización para poder comprobar si se gana o se pierde después del .load() completa exitosamente.

refreshData() debería estructurarse así:

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

También deberías cambiar esto:

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

a esto:

t = window.setInterval(refreshData, 10000);

no veo eso self incluso se definió, por lo que eso también podría haber estado causando su problema y debe usar la referencia de función directamente en lugar de colocarla en una cadena.

Y, como cuestión de limpieza, deberías cambiar ambas apariciones de esto:

t = clearInterval(t);

a esto:

clearInterval(t);

Aquí hay una versión limpia del código que también elimina variables globales y definiciones de funciones innecesarias:

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

});