如何在 JavaScript 中停止 `setTimeout` 或 `setInterval` 循環？-css教學-PHP中文網

如何在 JavaScript 中停止 `setTimeout` 或 `setInterval` 循環？

Mary-Kate Olsen

發布： 2024-12-13 16:59:10

原創

789 人瀏覽過

How to Stop a `setTimeout` or `setInterval` Loop in JavaScript?

停止 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();

登入後複製

或者，可以使用 setInterval 來取代 setTimeout 來建立重複循環。不過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中文網其他相關文章！