0

如果我有这样的功能：

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

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

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

到目前为止一切都很好，但是如果我想要打破动画循环的能力，我该怎么做呢？clearTimeout() 会是我要找的吗？

4

2 回答 2

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();
于 2013-01-31T11:19:41.967 回答
0

是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().

于 2013-01-31T11:18:57.330 回答