Css 如何停止 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;
        }
}

所以你可以把它当做:

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个停止事项itself.