javascript - 如何停止 setTimeout 循环？

Question

我正在尝试构建一个带有图像 Sprite 的加载指示器，我想出了这个函数

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

所以输出看起来像这样

http://jsfiddle.net/TTkre/

我不得不使用 setBgPosition();在 else 中保持循环运行所以现在我的问题是一旦我想要[加载完成]如何停止这个循环？

Answer 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 再次调用自身，而是让它将 c 设置回 0。否则，这是行不通的。另请注意，我使用 0 作为超时未决时的句柄值； 0 不是 setTimeout 的有效返回值，因此它是一个方便的标志。

这也是我认为使用 setInterval 而不是 setTimeout 会更好的(少数)地方之一。 setInterval 重复。所以:

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 停止自身。 p>