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

问题描述

  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（）;里面的其他来保持这个运行在一个循环，所以现在我的问题是如何停止这个循环一次我想要[加载完成]？

尊敬

解决方案

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（）; 
 // ...稍后，当你准备好停止... 
 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（）; 
 // ...稍后，当你准备停止... 
 clearInterval（timer）;尽管如此，我想找到一种方法来使 
  



< > setBgPosition 通过检测到某些完成条件已满足，停止事物 。

im 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]?

Regards

解决方案

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屋！