为什么clearInterval()不起作用？

Question

我是JavaScript的新手，我遇到了这个脚本的问题。它是网络游戏的一部分，脚本应该刷新页面，直到玩家赢或输。由于某种原因，它不会停止刷新，我放了一个警报函数来检查这些函数是否有效，我得到了警报，但它仍然在继续刷新页面。我做错了什么？

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

您需要修复引用 self 并修复 .load() 打电话。

.load() 是异步的，所以它在调用之前没有完成 youWin() 和 youLose() 就在它之后。你需要一个完成功能，这样你就可以在 .load() 成功完成。

refreshData() 应该这样结构:

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

你也应该改变这个:

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

对此:

t = window.setInterval(refreshData, 10000);

我看不出来 self 甚至被定义，这样也可能导致你的问题，你应该直接使用函数引用，而不是放在一个字符串中。

而且，作为一个清理问题，您应该更改这两种情况:

t = clearInterval(t);

对此:

clearInterval(t);

这是代码的清理版本，它也消除了全局变量和不必要的函数定义:

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

});