這篇文章主要講解了“setTimeout的實(shí)現(xiàn)原理及使用注意”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“setTimeout的實(shí)現(xiàn)原理及使用注意”吧！

創(chuàng)新互聯(lián)建站專注于會(huì)昌網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供會(huì)昌營銷型網(wǎng)站建設(shè)，會(huì)昌網(wǎng)站制作、會(huì)昌網(wǎng)頁設(shè)計(jì)、會(huì)昌網(wǎng)站官網(wǎng)定制、小程序定制開發(fā)服務(wù)，打造會(huì)昌網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供會(huì)昌網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

setTimeout，它就是一個(gè)定時(shí)器，用來指定某個(gè)函數(shù)在多少毫秒之后執(zhí)行。

setTimeout用法

var timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);  var timeoutID = setTimeout(function[, delay]);  var timeoutID = setTimeout(code[, delay]);

•     第一個(gè)參數(shù)為函數(shù)或可執(zhí)行的字符串(比如alert('test'),此法不建議使用)

•     第二個(gè)參數(shù)為延遲毫秒數(shù)，可選的，默認(rèn)值為0.

•     第三個(gè)及后面的參數(shù)為函數(shù)的入?yún)ⅰ?/p>

•     setTimeout 的返回值是一個(gè)數(shù)字，這個(gè)值為timeoutID，可以用于取消該定時(shí)器。

setTimeout在瀏覽器中的實(shí)現(xiàn)

瀏覽器渲染進(jìn)程中所有運(yùn)行在主線程上的任務(wù)都需要先添加到消息隊(duì)列，然后事件循環(huán)系統(tǒng)再按照順序執(zhí)行消息隊(duì)列中的任務(wù)。

在 Chrome 中除了正常使用的消息隊(duì)列之外，還有另外一個(gè)消息隊(duì)列(我們可以稱為延遲隊(duì)列)，這個(gè)隊(duì)列中維護(hù)了需要延遲執(zhí)行的任務(wù)列表，包括了定時(shí)器和 Chromium 內(nèi)部一些需要延遲執(zhí)行的任務(wù)。所以當(dāng)通過 JavaScript 創(chuàng)建一個(gè)定時(shí)器時(shí)，渲染進(jìn)程會(huì)將該定時(shí)器的回調(diào)任務(wù)添加到延遲隊(duì)列中。

比如這樣的一段代碼：

function foo(){    console.log("test")  }  var timeoutID = setTimeout(foo,100);

當(dāng)通過 JavaScript 調(diào)用 setTimeout 設(shè)置回調(diào)函數(shù)的時(shí)候，渲染進(jìn)程將會(huì)創(chuàng)建一個(gè)回調(diào)任務(wù)，包含了回調(diào)函數(shù)foo、當(dāng)前發(fā)起時(shí)間、延遲執(zhí)行時(shí)間等，其模擬代碼如下所示：

struct DelayTask{    int64 id；    CallBackFunction cbf;    int start_time;    int delay_time;  };  DelayTask timerTask;  timerTask.cbf = foo;  timerTask.start_time = getCurrentTime(); //獲取當(dāng)前時(shí)間  timerTask.delay_time = 100;//設(shè)置延遲執(zhí)行時(shí)間

創(chuàng)建好回調(diào)任務(wù)之后，就會(huì)將該任務(wù)添加到延遲執(zhí)行隊(duì)列中。那這個(gè)回調(diào)任務(wù)，什么時(shí)候會(huì)被執(zhí)行呢？

瀏覽器中有個(gè)函數(shù)是專門用來處理延遲執(zhí)行任務(wù)的，暫且稱為ProcessDelayTask，它的主要邏輯如下：

void ProcessTimerTask(){    //從delayed_incoming_queue中取出已經(jīng)到期的定時(shí)器任務(wù)    //依次執(zhí)行這些任務(wù)  }  TaskQueue task_queue；  void ProcessTask();  bool keep_running = true;  void MainTherad(){    for(;;){      //執(zhí)行消息隊(duì)列中的任務(wù)      Task task = task_queue.takeTask();      ProcessTask(task);      //執(zhí)行延遲隊(duì)列中的任務(wù)      ProcessDelayTask()      if(!keep_running) //如果設(shè)置了退出標(biāo)志，那么直接退出線程循環(huán)          break;     }  }

其實(shí)就是，當(dāng)瀏覽器處理完消息隊(duì)列中的一個(gè)任務(wù)之后，就會(huì)開始執(zhí)行 ProcessDelayTask 函數(shù)。ProcessDelayTask 函數(shù)會(huì)根據(jù)發(fā)起時(shí)間和延遲時(shí)間計(jì)算出到期的任務(wù)，然后依次執(zhí)行這些到期的任務(wù)。等到期的任務(wù)執(zhí)行完成之后，再繼續(xù)下一個(gè)循環(huán)過程。這樣定時(shí)器就實(shí)現(xiàn)了，從這個(gè)過程也可以明顯看出，定時(shí)器并不一定是準(zhǔn)時(shí)延后執(zhí)行的。

注意事項(xiàng)

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2.  如果當(dāng)前任務(wù)執(zhí)行時(shí)間過久，會(huì)延遲到期定時(shí)器任務(wù)的執(zhí)行

在使用 setTimeout 的時(shí)候，有很多因素會(huì)導(dǎo)致回調(diào)函數(shù)執(zhí)行比設(shè)定的預(yù)期值要久，其中一個(gè)就是上文說到的，如果處理的當(dāng)前任務(wù)耗時(shí)過長，定時(shí)器設(shè)置的任務(wù)就會(huì)被延后執(zhí)行。

比如在瀏覽器中執(zhí)行這樣一段代碼，并打印執(zhí)行時(shí)間：

function bar() {      console.log('bar')      const endTime = Date.now()      console.log('cost time',endTime - startTime)  }  function foo() {      setTimeout(bar, 0);      for (let i = 0; i < 5000; i++) {          let i = 5+8+8+8          console.log(i)      }  }  foo()

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

從結(jié)果可以看到，執(zhí)行 foo 函數(shù)所消耗的時(shí)長是 365 毫秒，這也就意味著通過 setTimeout 設(shè)置的任務(wù)被推遲了 365 毫秒才執(zhí)行，而設(shè)置 setTimeout 的回調(diào)延遲時(shí)間是 0。

    2 .  使用 setTimeout 設(shè)置的回調(diào)函數(shù)中的 this 環(huán)境不是指向回調(diào)函數(shù)

比如這段代碼：

var name= 1;  var MyObj = {    name: 2,    test:1,    showName: function(){      console.log(this.name,this.test);    }  }  setTimeout(MyObj.showName,1000)  MyObj.showName()  //先輸出 2 1  // 1s后輸出 1 undefined

這里其實(shí)認(rèn)真分析一下，也很好理解這個(gè) this 的指向。按照 this 的規(guī)定，如果是對象調(diào)用(obj.fn())，那么this指向該對象,因此MyObj.showName()輸出的是 MyObj 里面的值。在 setTimeout 中，入?yún)⑹荕yObj.showName，這里是把這個(gè)值傳了進(jìn)去，可以理解為：

const fn = MyObj.showName  setTimeout(fn,1000)

這樣看，在setTimeout里面，當(dāng)執(zhí)行到的時(shí)候，實(shí)際上就是在window下執(zhí)行fn，此時(shí)的this，就指向了window,而不是原來的函數(shù)。

    3 .  setTimeout 存在嵌套調(diào)用問題

如果 setTimeout 存在嵌套調(diào)用，調(diào)用超過5次后，系統(tǒng)會(huì)設(shè)置最短執(zhí)行時(shí)間間隔為 4 毫秒。

我們可以在瀏覽器粗略測試一下，有如下代碼：

let startTime = Date.now()  function cb() {     const endTime = Date.now()    console.log('cost time',endTime - startTime)    startTimestartTime = startTime    setTimeout(cb, 0);   }  setTimeout(cb, 0);

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

從結(jié)果可以看出，前面五次調(diào)用的時(shí)間間隔比較小，嵌套調(diào)用超過五次以上，后面每次的調(diào)用最小時(shí)間間隔是 4 毫秒(我運(yùn)行的結(jié)果，間隔基本是 5ms，考慮有代碼執(zhí)行的計(jì)算誤差)。

之所以出現(xiàn)這樣的情況，是因?yàn)樵?Chrome 中，定時(shí)器被嵌套調(diào)用 5 次以上，系統(tǒng)會(huì)判斷該函數(shù)方法被阻塞了，如果定時(shí)器的調(diào)用時(shí)間間隔小于 4 毫秒，那么瀏覽器會(huì)將每次調(diào)用的時(shí)間間隔設(shè)置為 4 毫秒?？梢钥聪略创a(https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/frame/dom_timer.cc)

static const int kMaxTimerNestingLevel = 5;  // Chromium uses a minimum timer interval of 4ms. We'd like to go  // lower; however, there are poorly coded websites out there which do  // create CPU-spinning loops.  Using 4ms prevents the CPU from  // spinning too busily and provides a balance between CPU spinning and  // the smallest possible interval timer.  static constexpr base::TimeDelta kMinimumInterval = base::TimeDelta::FromMilliseconds(4);

所以，一些實(shí)時(shí)性較高的需求就不太適合使用 setTimeout 了，比如你用 setTimeout 來實(shí)現(xiàn) JavaScript 動(dòng)畫就不一定是一個(gè)很好的主意。

    4 .  未激活的頁面，setTimeout 執(zhí)行最小間隔是 1000 毫秒

如果標(biāo)簽不是當(dāng)前的激活標(biāo)簽，那么定時(shí)器最小的時(shí)間間隔是 1000 毫秒，目的是為了優(yōu)化后臺(tái)頁面的加載損耗以及降低耗電量。這一點(diǎn)你在使用定時(shí)器的時(shí)候要注意。

    5 .   延時(shí)執(zhí)行時(shí)間有最大值

Chrome、Safari、Firefox 都是以 32 個(gè) bit 來存儲(chǔ)延時(shí)值的，32bit 最大只能存放的數(shù)字是 2147483647 毫秒，這就意味著，如果 setTimeout 設(shè)置的延遲值大于 2147483647 毫秒（大約 24.8 天）時(shí)就會(huì)溢出，這導(dǎo)致定時(shí)器會(huì)被立即執(zhí)行。如：

let startTime = Date.now()  function foo(){    const endTime = Date.now()    console.log('cost time',endTime - startTime)    console.log("test")  }  var timerID = setTimeout(foo,2147483648);//會(huì)被立即調(diào)用執(zhí)行

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

運(yùn)行后可以看到，這段代碼是立即被執(zhí)行的。但如果將延時(shí)值修改為小于 2147483647 毫秒的某個(gè)值，那么執(zhí)行時(shí)就沒有問題了。

感謝各位的閱讀，以上就是“setTimeout的實(shí)現(xiàn)原理及使用注意”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對setTimeout的實(shí)現(xiàn)原理及使用注意這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！