如何在 JavaScript 中停止 `setTimeout` 或 `setInterval` 循环？-css教程-PHP中文网

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

Mary-Kate Olsen

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

原创

796 人浏览过

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中文网其他相关文章！