js 定時(shí)器筆記

BoYang 發(fā)布于2019-08-23 13:39 / 2012人閱讀

摘要：本文是學(xué)習(xí)定時(shí)器單線程同步異步任務(wù)的筆記，只適合初學(xué)者。第一個(gè)參數(shù)是函數(shù)名或者語句，第二個(gè)參數(shù)延遲的時(shí)間參數(shù)，單位為它返回定時(shí)器的編號(hào)，以后可以用來取消這個(gè)定時(shí)器。將該整數(shù)傳入和函數(shù)，就可以取消對(duì)應(yīng)的定時(shí)器。

本文是學(xué)習(xí)js定時(shí)器、單線程、同步異步任務(wù)的筆記，只適合初學(xué)者。

一、定時(shí)器（timer）

JavaScript提供定時(shí)執(zhí)行代碼的功能，該功能主要由setTimeout()和setInterval()這兩個(gè)函數(shù)來實(shí)現(xiàn)

二、setTimeout() 1、使用規(guī)則

setTimeout函數(shù)用來指定某個(gè)函數(shù)或某段代碼，在多少毫秒之后執(zhí)行。
第一個(gè)參數(shù)是函數(shù)名或者語句，第二個(gè)參數(shù)延遲的時(shí)間參數(shù)，單位為ms

var timerId = setTimeout(function|code, delay)
setTimeout("console.log(2)",1000);

它返回定時(shí)器的編號(hào)，以后可以用來取消這個(gè)定時(shí)器。

2、使用注意

推遲執(zhí)行的代碼必須以字符串的形式，放入setTimeout。
因?yàn)橐鎯?nèi)部使用eval函數(shù)，將字符串轉(zhuǎn)為代碼。
如果推遲執(zhí)行的是函數(shù)，則可以直接將函數(shù)名，放入setTimeout。
一方面eval函數(shù)有安全顧慮，另一方面為了便于JavaScript引擎優(yōu)化代碼，setTimeout方法一般總是采用函數(shù)名的形式

三、setInterval()

setInterval函數(shù)的用法與setTimeout完全一致，區(qū)別僅僅在于setInterval指定某個(gè)任務(wù)每隔一段時(shí)間就執(zhí)行一次。如果不取消的話，就會(huì)無限次的定時(shí)執(zhí)行。
第一個(gè)參數(shù)是函數(shù)名或者語句，第二個(gè)參數(shù)是間隔執(zhí)行的時(shí)間，單位為ms
例一：實(shí)現(xiàn)自增數(shù)據(jù)輸出

var i=0
var timer=setInterval(function(){console.log(i++)},1000)
//不要在function傳遞i參數(shù)，不然得到的就是NaN

例二：實(shí)現(xiàn)定時(shí)器的功能

var timer=setInterval(function(){console.log(new Date)},1000)

四、解除定時(shí)器clearTimeout()，clearInterval()

setTimeout和setInterval函數(shù)，都返回一個(gè)表示計(jì)數(shù)器編號(hào)的整數(shù)值。
將該整數(shù)傳入clearTimeout和clearInterval函數(shù)，就可以取消對(duì)應(yīng)的定時(shí)器。

var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);

clearTimeout(id1);
clearInterval(id2);

五：舉個(gè)例子
其實(shí)這篇文章寫定時(shí)器的經(jīng)典案例寫的很棒JavaScrip同步、異步、回調(diào)執(zhí)行順序之經(jīng)典閉包setTimeout分析

var i=0;
for(var i=0; i<10; i++){
  setTimeout(function(){
      console.log(i)
  }, 1000)
}

執(zhí)行結(jié)果：

解析：先執(zhí)行主線程的for循環(huán)，for循環(huán)執(zhí)行了10次，把匿名函數(shù)添加了到任務(wù)序列10次。等for循環(huán)執(zhí)行完畢，i變成10之后，把任務(wù)序列的函數(shù)添加到主線程，輸出10次i=10.

var t = true;  
setTimeout(function(){ 
  t = false; 
}, 1000);  

while(t){console.log("end") }

執(zhí)行結(jié)果：不停的輸出end，不會(huì)再1000ms之后停止的。
解析：因?yàn)閣hile循環(huán)是在主線程執(zhí)行，主線程的while的循環(huán)不停止，是不會(huì)再執(zhí)行任務(wù)隊(duì)列里面setimeout的函數(shù)的。

六、單線程模型

五、六、七章的內(nèi)容全部來源于阮一峰JavaScript 標(biāo)準(zhǔn)參考教程（alpha）
單線程模型指的是，JavaScript 只在一個(gè)線程上運(yùn)行。也就是說，JavaScript 同時(shí)只能執(zhí)行一個(gè)任務(wù)，其他任務(wù)都必須在后面排隊(duì)等待。

注意，JavaScript 只在一個(gè)線程上運(yùn)行，不代表 JavaScript 引擎只有一個(gè)線程。事實(shí)上，JavaScript 引擎有多個(gè)線程，單個(gè)腳本只能在一個(gè)線程上運(yùn)行（稱為主線程），其他線程都是在后臺(tái)配合。

七、同步任務(wù)和異步任務(wù)

五、六、七章的內(nèi)容全部來源于阮一峰JavaScript 標(biāo)準(zhǔn)參考教程（alpha）
程序里面所有的任務(wù)，可以分成兩類：同步任務(wù)（synchronous）和異步任務(wù)（asynchronous）。

同步任務(wù)是那些沒有被引擎掛起、在主線程上排隊(duì)執(zhí)行的任務(wù)。只有前一個(gè)任務(wù)執(zhí)行完畢，才能執(zhí)行后一個(gè)任務(wù)。

異步任務(wù)是那些被引擎放在一邊，不進(jìn)入主線程、而進(jìn)入任務(wù)隊(duì)列的任務(wù)。只有引擎認(rèn)為某個(gè)異步任務(wù)可以執(zhí)行了（比如 Ajax 操作從服務(wù)器得到了結(jié)果），該任務(wù)（采用回調(diào)函數(shù)的形式）才會(huì)進(jìn)入主線程執(zhí)行。

八、任務(wù)隊(duì)列

JavaScript 運(yùn)行時(shí)，除了一個(gè)正在運(yùn)行的主線程，引擎還提供一個(gè)任務(wù)隊(duì)列（task queue），里面是各種需要當(dāng)前程序處理的異步任務(wù)。

首先，主線程會(huì)去執(zhí)行所有的同步任務(wù)。等到同步任務(wù)全部執(zhí)行完，就會(huì)去看任務(wù)隊(duì)列里面的異步任務(wù)。如果滿足條件，那么異步任務(wù)就重新進(jìn)入主線程開始執(zhí)行，這時(shí)它就變成同步任務(wù)了。等到執(zhí)行完，下一個(gè)異步任務(wù)再進(jìn)入主線程開始執(zhí)行。一旦任務(wù)隊(duì)列清空，程序就結(jié)束執(zhí)行。

引用這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制這篇文章的解析：

同步和異步任務(wù)分別進(jìn)入不同的執(zhí)行"場(chǎng)所"，同步的進(jìn)入主線程，異步的進(jìn)入Event Table并注冊(cè)函數(shù)。
當(dāng)指定的事情完成時(shí)，Event Table會(huì)將這個(gè)函數(shù)移入Event Queue。
主線程內(nèi)的任務(wù)執(zhí)行完畢為空，會(huì)去Event Queue讀取對(duì)應(yīng)的函數(shù)，進(jìn)入主線程執(zhí)行。
上述過程會(huì)不斷重復(fù)，也就是常說的Event Loop(事件循環(huán))。

九、異步與回調(diào)函數(shù)

來源：如果沒有callback函數(shù)，會(huì)先執(zhí)行f2，f3函數(shù)再執(zhí)行f2函數(shù)。
但是如果f1，f2函數(shù)是有先后順序的，必須f1執(zhí)行完成，再執(zhí)行f2的話（f1可能是獲取ajax，f2是處理ajax數(shù)據(jù)），就需要回調(diào)函數(shù)。

給f1設(shè)置callback函數(shù)做參數(shù)，然后把這個(gè)參數(shù)當(dāng)成函數(shù)執(zhí)行，執(zhí)行f1的過程中，設(shè)置了一個(gè)定時(shí)器，等數(shù)據(jù)到來之后，再去執(zhí)行callback函數(shù)。然后把f2作為f1的參數(shù)來調(diào)用

function f1(callback){
    setTimeout(function(){
        //做某件事，可能很久
        console.log("別急，開始執(zhí)行f1")
        for(var i=0;i< 100000;i++){

        }
        console.log("f1執(zhí)行完了")

        callback()
    }, 0);

}
function f2(){
    console.log("執(zhí)行f2");
}
function f3(){
    console.log("執(zhí)行f3");
}
f1(f2) //當(dāng)f1執(zhí)行完之后再執(zhí)行 f2
f3()

10、函數(shù)節(jié)流

轉(zhuǎn)載一篇函數(shù)節(jié)流與函數(shù)防抖，寫的非常好，具體內(nèi)容可看這篇文章。我不再贅述，我只記錄一下節(jié)流的代碼

 var timer
  function hiFrequency(){
      if(timer){
          clearTimeout(timer)
      }
        timer = setTimeout(function(){
             console.log("do something")
        }, 300)
  }

  hiFrequency()
  hiFrequency()
  hiFrequency()