最近,我遇到了一個(gè)需求是我要隔段時(shí)間調(diào)用一個(gè)函數(shù),類似每隔十秒鐘發(fā)送一個(gè) ajax 請(qǐng)求.當(dāng)然,setInterval 看起來是不錯(cuò)的方式.但是我遇到了挫折.
想要理解為啥 setInterval 是不好的,我們需要在腦子里面知道一個(gè)知識(shí),那就是 JavaScript 是單線程的.也就是一次只能執(zhí)行一個(gè)操作.
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
正如你在打印的console.log語句中所看到的那樣灶搜，setInterval一直在不停地發(fā)送ajax調(diào)用而不關(guān)心先前的調(diào)用是否已經(jīng)返回躯护。
這個(gè)會(huì)使得很多請(qǐng)求在排隊(duì).
現(xiàn)在讓我們看下同步請(qǐng)求在 setInterval:
var counter = 0;
var fakeTimeIntensiveOperation = function() {
for(var i =0;i<50000000;i++) {
document.getElementById('random');
}
let insideTimeTakinngFunction = 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
我們?cè)谶@里看到當(dāng)setInterval遇到時(shí)間密集型操作時(shí)，它會(huì)做兩件事情中的任何一件罐氨，a 嘗試進(jìn)入軌道或b創(chuàng)建新的節(jié)奏扳肛。 在Chrome上隅忿，它創(chuàng)造了一種新的節(jié)奏迫靖。
同樣,在 setInterval 的代碼塊里面遇到錯(cuò)誤,它不會(huì)停止執(zhí)行而是繼續(xù)執(zhí)行錯(cuò)誤的代碼,需要使用 clearInterval 來停止它.
或者懊蒸，您可以在時(shí)間敏感操作的情況下遞歸使用setTimeout拇泛。
總結(jié)
在異步的操作里面,setTimeInterval 會(huì)創(chuàng)建一個(gè)長長的請(qǐng)求,
原文地址:
https://dev.to/akanksha_9560/why-not-to-use-setinterval--2na9
