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()、に設定されているように1回だけ実行されますsetInterval()。

于 2013-01-31T11:18:57.330 に答える