Question

如果我有这样的功能：

function x()
{
    animate(a, 2000);
    animate(b, 3000);
    animate(c, 4000);
}

其中 - a，b＆amp; c - 是表示页面上元素的变量，数字是传递给animate（）函数的参数，该函数将其用作超时的持续时间值，如下所示：

function animate(src, dur)
{
    setTimeout(function() {
        src.style.opacity = 1;
    }, dur);
}

到目前为止一切都很好，但如果我想要突破动画循环的能力，我该如何解决呢？ clearTimeout（）会成为我想要的吗？

Answer 1

已分配超时的变量可以传递给clearTimeout函数，这将停止该函数。您可以将这些变量存储在一个数组中，并通过迭代此数组并将超时传递给clearTimeout函数来轻松清除所有超时。

var timeouts = [];

/* Save timeouts into a variable and push to an array */
function animate(src, dur)
{
    var timeout = setTimeout(function() {
        src.style.opacity = 1;
    }, dur);
    timeouts.push(timeout);
}

/** Clear all timeouts**/
function clearTimeouts(){
   for(var i = 0; i < timeouts.length; i++){
     clearTimeout(timeouts[i]);
   }
}

//Create timeouts
x();
//Invoke clearTimeouts
clearTimeouts();

Answer 2

是的，clearTimeout()是正确的方法：

function animate(src, dur)
{
    return setTimeout(function() {
        src.style.opacity = 1;
    }, dur);
}

并保存返回的标识符：

function x()
{
    var aId = animate(a, 2000);
    var bId = animate(b, 3000);
    var cId = animate(c, 4000);
}

稍后您只需拨打clearTimeout(aId)或任何您想要的电话。顺便说一下，您的代码中没有循环，setTimeout()只执行一次，因为setInterval()为<{1}}。

打破一系列超时命令？

2 个答案: