我试图用图像精灵建立一个加载指示器,然后我想到了这个功能
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(); 在其他内部保持循环运行,所以现在我的问题是一旦我想要[加载完成],如何停止该循环?
setTimeout返回计时器句柄,您可以使用该句柄停止超时clearTimeout。
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因此会产生一个方便的标志。
setBgPosition
c
0
这也是(少数)的地方我想你会更好用的一个setInterval,而不是setTimeout。setInterval重复。所以:
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事情 本身 停止。