なぜclearInterval()が機能しないのでしょうか?

Question

私は JavaScript を初めて使用するのですが、このスクリプトで問題が発生しています。これは Web ゲームの一部であり、スクリプトはプレーヤーが勝つか負けるまでページを更新すると想定されています。何らかの理由で更新が停止しません。機能が機能するかどうかを確認するためにアラート機能を追加しました。アラートは表示されますが、それでもページの更新が続けられます。私は何を間違っているのでしょうか？

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

});