js 定時器筆記

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

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

本文是學習js定時器、單線程、同步異步任務的筆記，只適合初學者。

一、定時器（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ù)，將字符串轉為代碼。
如果推遲執(zhí)行的是函數(shù)，則可以直接將函數(shù)名，放入setTimeout。
一方面eval函數(shù)有安全顧慮，另一方面為了便于JavaScript引擎優(yōu)化代碼，setTimeout方法一般總是采用函數(shù)名的形式

三、setInterval()

setInterval函數(shù)的用法與setTimeout完全一致，區(qū)別僅僅在于setInterval指定某個任務每隔一段時間就執(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ù)，就可以取消對應的定時器。

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

clearTimeout(id1);
clearInterval(id2);

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

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

執(zhí)行結果：

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

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

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

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

六、單線程模型

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

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

七、同步任務和異步任務

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

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

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

八、任務隊列

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

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

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

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

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

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

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

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) //當f1執(zhí)行完之后再執(zhí)行 f2
f3()

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

轉載一篇函數(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云服務器云服務器 js 定時器問題 js 時間定時器 js隨機定時器 js 查看所有定時器

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

轉載請注明本文地址：http://m.hztianpu.com/yun/99318.html

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

摘要：異步請求線程在在連接后是通過瀏覽器新開一個線程請求將檢測到狀態(tài)變更時，如果設置有回調函數(shù)，異步線程就產(chǎn)生狀態(tài)變更事件，將這個回調再放入事件循環(huán)隊列中。基礎：瀏覽器 -- 多進程，每個tab頁獨立一個瀏覽器渲染進程（瀏覽器內(nèi)核）每個瀏覽器渲染進程是多線程的，主要包括：GUI渲染線程 JS引擎線程也稱為JS內(nèi)核，負責處理Javascript腳本程序。（例如V8引擎） JS引擎線程負...

junnplus 2019-08-22 15:43 評論0 收藏0
基本方法筆記 - 收藏集 - 掘金

摘要：探討判斷橫豎屏的最佳實現(xiàn)前端掘金在移動端，判斷橫豎屏的場景并不少見，比如根據(jù)橫豎屏以不同的樣式來適配，抑或是提醒用戶切換為豎屏以保持良好的用戶體驗。探討判斷橫豎屏的最佳實現(xiàn) - 前端 - 掘金在移動端，判斷橫豎屏的場景并不少見，比如根據(jù)橫豎屏以不同的樣式來適配，抑或是提醒用戶切換為豎屏以保持良好的用戶體驗。判斷橫豎屏的實現(xiàn)方法多種多樣，本文就此來探討下目前有哪些實現(xiàn)方法以及其中的優(yōu)...

maochunguang 2019-08-20 17:44 評論0 收藏0
前端學習筆記（CSS、JS基礎篇）

摘要：搜索引擎中有一個爬蟲模塊，在頁面中使用諸如等強調式的標簽，有利于，說白了就是有利于被搜索到。定位相對定位不影響元素本身特性不使元素脫離文檔流。定時器如果是由事件控制的，要先關再開，避免多次觸發(fā)而混亂。 CSS篇注意：css注釋使用/ /，而不是或者//，否則很容易導致不明錯誤！?。?div padding：內(nèi)邊距。盒子內(nèi)容與盒子邊框的距離設置，相當于給盒子加了厚度，使用此屬性后會改...

caikeal 2019-08-19 17:57 評論0 收藏0
前端學習筆記（CSS、JS基礎篇）

摘要：搜索引擎中有一個爬蟲模塊，在頁面中使用諸如等強調式的標簽，有利于，說白了就是有利于被搜索到。定位相對定位不影響元素本身特性不使元素脫離文檔流。定時器如果是由事件控制的，要先關再開，避免多次觸發(fā)而混亂。 CSS篇注意：css注釋使用/ /，而不是或者//，否則很容易導致不明錯誤！?。?div padding：內(nèi)邊距。盒子內(nèi)容與盒子邊框的距離設置，相當于給盒子加了厚度，使用此屬性后會改...

xietao3 2019-08-30 12:54 評論0 收藏0
JS性能優(yōu)化筆記

摘要：四如果需要遍歷數(shù)組，應該先緩存數(shù)組長度，將數(shù)組長度放入局部變量中，避免多次查詢數(shù)組長度。五盡量選用局部變量而不是全局變量。所以如果這樣的表達式重復出現(xiàn)，只要可能，應該盡量少出現(xiàn)這樣的表達式，可以利用局部變量，把它放入一個臨時的地方進行查詢。通過網(wǎng)上查找資料了解關于性能優(yōu)化方面的內(nèi)容，現(xiàn)簡單整理，僅供大家在優(yōu)化的過程中參考使用，如有什么問題請及時提出，再做出相應的補充修改。一、讓...

baoxl 2019-08-21 10:20 評論0 收藏0