JavaScript で `setTimeout` ループを停止するにはどうすればよいですか?

setTimeout ループの実行を制御する方法

スプライト イメージを使用して読み込みインジケーターを作成しようとしていますが、次のような問題が発生しましたロードが完了するとループが停止する問題。指定した関数は、指定された間隔で値の配列を反復する setTimeout ループを開始します。課題は、このループをプログラムで停止することです。

この問題を解決するには、setTimeout によって返されるタイマー ハンドルを利用できます。その後、clearTimeout を使用してタイムアウト操作を停止できます。

この手法を組み込んだコードの修正バージョンを次に示します。

function setBgPosition() {
    var c = 0,
        timer = 0;
    var numbers = [0, -120, -240, -360, -480, -600, -720];
    function run() {
        Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
        if (c >= numbers.length) {
            c = 0;
        }
        timer = setTimeout(run, 200);
    }
    timer = setTimeout(run, 200);

    return stop;

    function stop() {
        if (timer) {
            clearTimeout(timer);
            timer = 0;
        }
    }
}

var stop = setBgPosition();
// ...later, when you're ready to stop...
stop();

タイマー ハンドルをタイマー変数に割り当てることで、次のことができます。ロードが完了したら、clearTimeout を使用して参照し、クリアします。

さらに、代わりに setInterval を使用することを検討する価値があります。繰り返し実行する必要があるシナリオでは setTimeout を使用します。これにより、コードが簡素化され、より堅牢なソリューションが提供されます。

自己完結型で自律的な機能を確保するために、ループの終了時期を検出する適切なメカニズムを setBgPosition 自体内に実装することを忘れないでください。

以上がJavaScript で `setTimeout` ループを停止するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。