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

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

この改訂されたコードは、setBgPosition 内で停止関数を定義します。 stop 関数は、タイマー ハンドルが存在するかどうかを確認し、存在する場合は、clearTimeout でクリアします。更新されたコードは次のように使用できます:

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

また、setTimeout の代わりに setInterval を使用して、繰り返しループを作成することもできます。ただし、setInterval にはループを停止するために clearInterval が必要です。

function setBgPosition() {
    var c = 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;
        }
    }

    return setInterval(run, 200);
}

このコードは次のように使用できます。

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

最後に、setBgPosition 自体内で条件を使用して検出することを検討することをお勧めします。ロードプロセスが完了すると、ループが自動的に停止します。

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