資訊專欄INFORMATION COLUMN
Recently, I came across a requirement where I had to call a function repeatedly after specific time interval, like sending ajax call at every 10 seconds. Sure, best option seems as setInterval, but it blew up my face like a cracker :)
In order to understand why setInterval is evil we need to keep in mind a fact that javascript is essentially single threaded, meaning it will not perform more than one operation at a time.
In cases when functions takes longer than delay mentioned in setInterval (like ajax call, which might it prevent from completing on time), we will find that either functions have no breathing room or setInterval breaks it"s rhythm.
var fakeCallToServer = function() {
setTimeout(function() {
console.log("returning from server", new Date().toLocaleTimeString());
}, 4000);
}
setInterval(function(){
let insideSetInterval = new Date().toLocaleTimeString();
console.log("insideSetInterval", insideSetInterval);
fakeCallToServer();
}, 2000);
//insideSetInterval 14:13:47
//insideSetInterval 14:13:49
//insideSetInterval 14:13:51
//returning from server 14:13:51
//insideSetInterval 14:13:53
//returning from server 14:13:53
//insideSetInterval 14:13:55
//returning from server 14:13:55
Try above code snippets in your console
As you can see from printed console.log statement that setInterval keeps on sending ajax calls relentlessly without caring previous call has returned or not.
This can queue up a lot of requests at once on the server.
Now, let"s try a synchronous operation in setInterval:
var counter = 0;
var fakeTimeIntensiveOperation = function() {
for(var i =0; i< 50000000; i++) {
document.getElementById("random");
}
let insideTimeTakingFunction = new Date().toLocaleTimeString();
console.log("insideTimeTakingFunction", insideTimeTakingFunction);
}
var timer = setInterval(function(){
let insideSetInterval = new Date().toLocaleTimeString();
console.log("insideSetInterval", insideSetInterval);
counter++;
if(counter == 1){
fakeTimeIntensiveOperation();
}
if (counter >= 5) {
clearInterval(timer);
}
}, 1000);
//insideSetInterval 13:50:53
//insideTimeTakingFunction 13:50:55
//insideSetInterval 13:50:55 <---- not called after 1s
//insideSetInterval 13:50:56
//insideSetInterval 13:50:57
//insideSetInterval 13:50:58
We see here when setInterval encounters time intensive operation, it does either of two things, a) try to get on track or b) create new rhythm. Here on chrome it creates a new rhythm.
Conclusion
In case of asynchronous operations, setTimeInterval will create long queue of requests which will be very counterproductive.
In case of time intensive synchronous operations, setTimeInterval may break the rhythm.
Also, if any error occurs in setInterval code block, it will not stop execution but keeps on running faulty code. Not to mention they need a clearInterval function to stop it.
Alternatively, you can use setTimeout recursively in case of time sensitive operations.
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106524.html
摘要：按照定時器的時間間隔，處第二個函數加入到事件隊列，但此時正在執行，所以只能等待。這樣做的好處是，在前一個定時器代碼執行完之前，不會向隊列插入新的定時器代碼，確保不會有任何缺失的間隔。 JavaScript高級程序設計（第三版）（以下簡稱紅寶書）22.3高級定時器中詳細介紹了定時器setTimeout和setInterval，看完書后，深入理解了二者的區別，結合前輩們給我的建議用setT...
摘要：但我認為談不上的毛病，而是編程模型和之間的一種模式差異。相比類，更貼近編程模型，使得這種差異更加突出。聲明本文采用循序漸進的示例來解釋問題。本文假設讀者已經使用超過一個小時。這是通過組件生命周期上綁定與的組合完成的。 本文由云+社區發表作者：Dan Abramov 接觸 React Hooks 一定時間的你，也許會碰到一個神奇的問題: setInterval 用起來沒你想的簡單。 R...
摘要：更方便的在于，由于自帶定時器功能，我們甚至不用自己去維護一個時間戳。請注意這里由于沒有調用另一個腳本，我們通過和的方式將我們的定時器程序傳入中。 問題 經常使用Javascript的同學一定對setInterval非常熟悉，當使用setInterval(callback, timer)時，每經過timer毫秒時間，系統都將調用一次callback。請問全局如果沒有提供setInterv...
摘要：這里是結論，將是更驚艷的那一個。瀏覽器隔一段時間像服務器發送一個請求，詢問這里有沒有需要更新的消息。在響應回來時，才會繼續發出第二個請求。但是，顯然的，這對我們要做的事來說并不算是什么問題。 我們都知道的是setTimout是用來延遲一個簡單的動作的，然而，setInterval的目的是用來重復執行某個動作的。 然后，以上只是一半的事實。因為如果一個函數需要在一個間隔時間內重復的執行，...
閱讀 3648·2021-10-09 09:58
閱讀 1188·2021-09-22 15:20
閱讀 2495·2019-08-30 15:54
閱讀 3510·2019-08-30 14:08
閱讀 887·2019-08-30 13:06
閱讀 1817·2019-08-26 12:16
閱讀 2678·2019-08-26 12:11
閱讀 2508·2019-08-26 10:38
