如何停止 setTimeout 循环? [英] How to stop a setTimeout loop?

问题描述

我正在尝试用图像精灵构建一个加载指示器，我想出了这个函数

function setBgPosition() {无功c = 0;无功数字 = [0, -120, -240, -360, -480, -600, -720];函数运行(){Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');if (c

所以输出看起来像这样

http://jsfiddle.net/TTkre/

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

解决方案

setTimeout 返回一个计时器句柄，您可以使用它来通过 clearTimeout 停止超时.

例如:

function setBgPosition() {无功c = 0，定时器 = 0;无功数字 = [0, -120, -240, -360, -480, -600, -720];函数运行(){Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');如果 (c >= numbers.length) {c = 0;}timer = setTimeout(run, 200);}timer = setTimeout(run, 200);返回停止；功能停止(){如果(定时器){清除超时(定时器)；定时器 = 0;}}

所以你可以把它用作:

var stop = setBgPosition();//...稍后，当您准备停止时...停止();

请注意，不是让 setBgPosition 再次调用自身，而是将 c 设置回 0.否则，这是行不通的.另请注意，我使用 0 作为超时未挂起时的句柄值；0 不是 setTimeout 的有效返回值，因此它是一个方便的标志.

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

function setBgPosition() {无功c = 0;无功数字 = [0, -120, -240, -360, -480, -600, -720];函数运行(){Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');如果 (c >= numbers.length) {c = 0;}}返回 setInterval(run, 200);}

这样使用:

var timer = setBgPosition();//...稍后，当您准备停止时...清除间隔(定时器)；

尽管如此，我还是想找到一种方法，通过检测某些完成条件已得到满足，使 setBgPosition 停止本身.>

I'm trying to build a loading indicator with a image sprite and I came up with this function

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

so the out put is looks like this

http://jsfiddle.net/TTkre/

I had to use setBgPosition(); inside else to keep this running in a loop so now my problem is how to stop this loop once I want [load finished]?

解决方案

setTimeout returns a timer handle, which you can use to stop the timeout with clearTimeout.

So for instance:

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

So you'd use that as:

var stop = setBgPosition();
// ...later, when you're ready to stop...
stop();

Note that rather than having setBgPosition call itself again, I've just had it set c back to 0. Otherwise, this wouldn't work. Also note that I've used 0 as a handle value for when the timeout isn't pending; 0 isn't a valid return value from setTimeout so it makes a handy flag.

This is also one of the (few) places I think you'd be better off with setInterval rather than setTimeout. setInterval repeats. So:

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

Used like this:

var timer = setBgPosition();
// ...later, when you're ready to stop...
clearInterval(timer);

All of the above notwithstanding, I'd want to find a way to make setBgPosition stop things itself, by detecting that some completion condition has been satisfied.

这篇关于如何停止 setTimeout 循环?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！