1. 程式人生 > >jscript定時器,一直用的東西,你真的明白嗎?

jscript定時器,一直用的東西,你真的明白嗎?

timeout javascrip 進程 為什麽 解析 異步 發現 頁面 AS

JavaScript定時器

JavaScript是一種解釋型語言(邊編譯邊執行),Js解析順序是從上到下,然後將編譯後的任務丟到一個事件隊列中,然後事件內的函數會從上到下開始執行

技術分享圖片

setInterval

setInterval(fn,t); fn是間隔t毫秒後執行的代碼塊

每隔t就執行fn直到你清除定時器

當js引擎讀取到一個setInterval語句的時候就會往瀏覽器定時觸發器中丟一個任務,然後定時 觸發器每隔t毫秒就往當前任務隊列中丟一個任務,任務內容為fn中的代碼塊(有圖有真相)

技術分享圖片

var startTime=new Date();
setInterval(function(){


console.log((new Date()-startTime)+"毫秒");
},1000);

技術分享圖片

可以看到每次都差不多1000毫秒。

setTimeout

setTimeout(fn,t);延遲t毫秒之後執行fn,區別就是這個只執行一次

技術分享圖片

var startTime=new Date();
setTimeout(function(){
console.log((new Date()-startTime)+"毫秒");
},1000);

技術分享圖片

看到這裏細心的人會發現異步這個詞

定時器是異步的

給大家舉個例子

var fn=function(){

console.log(123);

}

setTimeout(fn,1000);

console.log(567);

技術分享圖片

沒想到吧?567是先執行的。為什麽fn裏面的代碼不是等1000毫秒執行完之後輸出123,再輸出567呢

就是因為定時器是異步的,js解析到定時器的時候,會把定時器扔到定時觸發器,當延遲1000毫秒之

後,再扔到當前任務隊列裏面執行。在這個延遲的過程中,任務隊列裏面的代碼依然會執行,不會說

等你定時器執行了之後,我在執行!如果是等你執行完我在執行,那效率太 slow baby了

而且使用的時候不要太過於依賴定時器設置好的定時器時間,延遲的時間嚴格意義上來說總是大於t的,至於大多少,就要看當時js的執行情況了。

seTimeout註冊的函數會把任務丟給定時觸發器線程,而定時觸發器一旦到了延遲的時間就會將fn加入主進程執行隊列。但是如果當前任務隊列還有沒執行完的代碼,而又需要等待當前任務執行完畢才能執行

到fn,所以實際的延遲會比設置的時間要長。如果你在fn之前設置一個大大大循環,那你等吧。。啊哈哈哈哈

技術分享圖片

技術分享圖片

清除定時器,如果不清除定時器的話,會不斷往當前任務列表裏面添加任務執行,會把任務列表給整亂

代碼執行順序了 時間了 誤差就大了 你的頁面也就GG了所以用完要清除的。

timer =setInterval(fn,t);

clearInterval(timer);

同理

看完了 應該都能明白吧 看完給個贊唄 !!!

jscript定時器,一直用的東西,你真的明白嗎?