js 定時器筆記

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

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

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

一、定時器（timer）

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

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

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

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

它返回定時器的編號，以后可以用來取消這個定時器。

2、使用注意

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

三、setInterval()

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

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

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

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

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

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

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

clearTimeout(id1);
clearInterval(id2);

五：舉個例子
其實這篇文章寫定時器的經(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，不會再1000ms之后停止的。
解析：因為while循環(huán)是在主線程執(zhí)行，主線程的while的循環(huán)不停止，是不會再執(zhí)行任務(wù)隊列里面setimeout的函數(shù)的。

六、單線程模型

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

注意，JavaScript 只在一個線程上運行，不代表 JavaScript 引擎只有一個線程。事實上，JavaScript 引擎有多個線程，單個腳本只能在一個線程上運行（稱為主線程），其他線程都是在后臺配合。

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

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

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

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

八、任務(wù)隊列

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

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

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

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

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

來源：如果沒有callback函數(shù)，會先執(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ù)，然后把這個參數(shù)當(dāng)成函數(shù)執(zhí)行，執(zhí)行f1的過程中，設(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()

GPU云服務(wù)器云服務(wù)器 js 定時器問題 js 時間定時器 js隨機定時器 js 查看所有定時器

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99318.html

發(fā)表評論

登陸后可評論

0條評論

BoYang

男|高級講師

我要關(guān)注我要私信

TA的文章

主機名和域名是什么-主機域名中哪個表示主機名？

閱讀 6940·2021-09-22 15:08
白絲云，德國大帶寬VPS(聯(lián)通AS4837)新增季付優(yōu)惠，附測評教程，還可選擇美西AS9929+圣何

閱讀 1935·2021-08-24 10:03
騰訊云：云主機/短信/CDN/數(shù)據(jù)庫等秒殺；2G內(nèi)存、60GB SSD空間、6Mbps的VPS，年付

閱讀 2450·2021-08-20 09:36
UCloud推出U位智能資產(chǎn)管理服務(wù)，助力托管用戶進(jìn)一步降本增效

閱讀 1331·2020-12-03 17:22
Vue基礎(chǔ)之內(nèi)部指令（上）

閱讀 2483·2019-08-30 15:55
移動端fixed元素不顯示的一種解決方法

閱讀 914·2019-08-29 16:13
學(xué)習(xí)不一樣的vue實戰(zhàn)(1): 環(huán)境搭建

閱讀 3063·2019-08-29 12:41
jsonpGet, 跨域如此簡單

閱讀 3260·2019-08-26 12:12

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

js 定時器筆記

相關(guān)文章

【筆記】你不知道的JS讀書筆記——異步

基本方法筆記 - 收藏集 - 掘金

前端學(xué)習(xí)筆記（CSS、JS基礎(chǔ)篇）

前端學(xué)習(xí)筆記（CSS、JS基礎(chǔ)篇）

JS性能優(yōu)化筆記

發(fā)表評論

0條評論

BoYang

男|高級講師

TA的文章

主機名和域名是什么-主機域名中哪個表示主機名？

白絲云，德國大帶寬VPS(聯(lián)通AS4837)新增季付優(yōu)惠，附測評教程，還可選擇美西AS9929+圣何

騰訊云：云主機/短信/CDN/數(shù)據(jù)庫等秒殺；2G內(nèi)存、60GB SSD空間、6Mbps的VPS，年付

UCloud推出U位智能資產(chǎn)管理服務(wù)，助力托管用戶進(jìn)一步降本增效

Vue基礎(chǔ)之內(nèi)部指令（上）

移動端fixed元素不顯示的一種解決方法

學(xué)習(xí)不一樣的vue實戰(zhàn)(1): 環(huán)境搭建

jsonpGet, 跨域如此簡單

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

js 定時器筆記

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！