小编典典

如何停止setTimeout循环?

javascript

我试图用图像精灵建立一个加载指示器,然后我想到了这个功能

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)
        {
            setTimeout(run, 200);
        }else
        {
            setBgPosition();
        }
    }
    setTimeout(run, 200);
}

所以输出看起来像这样

我不得不使用setBgPosition(); 在其他内部保持循环运行,所以现在我的问题是一旦我想要[加载完成],如何停止该循环?


阅读 1412

收藏
2020-05-01

共1个答案

小编典典

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

请注意setBgPosition,我没有将其再次调用,而是将其重新设置c0。否则,这将行不通。另请注意,我已将0超时未挂起时用作句柄值。0不是来自的有效返回值,setTimeout因此会产生一个方便的标志。

这也是(少数)的地方我想你会更好用的一个setInterval,而不是setTimeoutsetInterval重复。所以:

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事情 本身 停止。

2020-05-01