後的setInterval

在this article調用x個執行功能，下面的功能是考慮到在使用setInterval（）執行操作X次後的setInterval

setIntervalX(function() { 
    animateColor(); 
    //or something 
}, 3000, 4); 

function setIntervalX(callback, delay, repetitions) { 
    var x = 0; 
    var intervalID = window.setInterval(function() { 

     callback(); 

     if (++x === repetitions) { 
      window.clearInterval(intervalID); 
     } 
    }, delay); 
}

什麼回調（）在這裏做？我試圖在指定的重複次數完成後執行一項功能。但這

setIntervalX(function() { 
    animateColor(); 
}, 3000, 4, function(){ 

completeFunction(); 

});

不起作用。也許這種語法是非常錯誤的。我是使用jQuery的印象，你可以串起來的功能和其它..

許多感謝任何見解。謝謝！

來源

2012-04-20 1252748

function setIntervalX(func, delay, times, callback) { 
    if (times > 0) { 
     setTimeout(function() { 
      func.apply(arguments.callee); 
      setIntervalX(func, delay, --times, callback); 
     }, delay); 
    } else { 
     callback.apply(this); 
    } 
} 

setIntervalX(function() { 
    document.write('ping!<br />'); 
}, 1000, 5, function() { 
    document.write('Finished!<br />'); 
});

我個人比較喜歡的setTimeout方法......但是，這只是我的。給這個鏡頭，看看它是否有效。 demo

啊看來我看錯你整個帖子...所以托比亞斯是正確的在他的推理的提問。我是你想要的一個例子。

來源

2012-04-20 17:44:21 rlemon

雜訊的電話了！謝謝！你能告訴我一個你使用setTimeout的例子嗎？並告訴我爲什麼你更喜歡它。如果它在某種程度上更好，我願意以不同的方式進行。再次感謝！ – 1252748 2012-04-20 17:56:31

setTimeout只在確定的時間段後運行一次函數。 setInterval有延遲問題。您在這裏看到的最大差異是每次迭代之間執行的代碼量。 http://jsfiddle.net/rlemon/Zf7GP/ – rlemon 2012-04-20 18:01:56

所以你怎麼能在這種情況下使用的setTimeout？ – 1252748 2012-04-20 18:03:38

我想你咯誤解的說明。 setIntervalX執行交互x次，而您希望在迭代之後有回調函數。

function setIntervalX(interationFunction, delay, repetitions, callbackFunction) { 
    var x = 0; 
    var intervalID = window.setInterval(function() { 

     iterationFunction(); 

     if (++x === repetitions) { 
      callbackFunction(); 
      window.clearInterval(intervalID); 
     } 
    }, delay); 
} 

setIntervalX(
    function() { 
    // this executed every time the interval triggers 
    }, 
    1000, // amount of milliseconds to delay before interval triggers 
    5, // amount of repetitions before interval is stopped and callback is executed 
    function() { 
    // this will be executed after the interval triggered 5 times 
    // so after round about 5 seconds after setIntervalX was started 
    } 
);

來源

2012-04-20 17:36:41

所以當筆者說，這「//這將有1秒的間隔重複每5次： setIntervalX（函數（）{// 你的邏輯這裏 }，1000，5）;「在你的邏輯部分在這裏指的不是我要重複的功能。它確實以這種方式工作，即使我做錯了。您能否告訴我一個如何以您的方式調用它的例子，以及在完成重新調整時的回調？謝謝！ – 1252748 2012-04-20 17:44:07

我編輯的代碼示例，並增加了例如如何使用一些解釋的意見 – 2012-04-20 18:11:49

哇，有Frame.js更加簡單：

for(var i=0; i<4; i++){ 
    Frame(3000, animateColor); 
} 
Frame(completeFunction); 
Frame.start();

兩個函數需要調用它傳遞給他們的第一個參數的回調：

function animateColor(callback){ 
    // do stuff 
    callback(); // to advance to the next interval 
} 
function completeFunction(callback){ 
    // do stuff 
    callback(); // to advance to conclude the series of Frames 
}

來源

2012-04-20 17:47:34 BishopZ

我很欣賞這一點，但似乎爲這個小功能加載一個新的庫是有點過分。但框架看起來很酷！謝謝！ – 1252748 2012-04-20 17:55:20

完全感謝您的評論。你的權利，框架是專爲比這更長的序列。動畫越複雜，回調就越複雜。像async和Frame這樣的流控制庫有助於理清這樣的問題，並且10k通常可以內聯包含，而不會對項目產生太大影響。 – BishopZ 2012-04-20 18:05:57

callback在原有的功能是跑每次間隔最多可達X次。試試這個修改允許一個完整的回調：

setIntervalX(function() { 
    animateColor(); 
    //or something 
}, 3000, 4, function(){ 
    alert("all done!"); 
}); 

function setIntervalX(callback, delay, repetitions, complete) { 
    var x = 0; 
    var intervalID = window.setInterval(function() { 

     callback(); 

     if (++x === repetitions) { 
      window.clearInterval(intervalID); 
      complete(); 
     } 
    }, delay); 
}

來源

2012-04-20 18:09:27

後的setInterval

回答

相關問題