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

資訊專欄INFORMATION COLUMN

javascript 定時器工作原理

godlong_X / 1978人閱讀

摘要：說到中的定時器，我們肯定會想到和這兩個函數(shù)。第一個回調(diào)一執(zhí)行，又開啟了第二個，這個定時器也是期望延時之后能夠執(zhí)行它的回調(diào)函數(shù)?？梢杂孟旅娴膱D來概括總結(jié)上面對定時器執(zhí)行原理進(jìn)行了簡要的分析，希望能夠幫助我們更深入的理解。

說到 javascript 中的定時器，我們肯定會想到 setTimeout() 和 setInterval() 這兩個函數(shù)。本文將從 事件循環(huán)（Event Loop） 的角度來分析兩者的工作原理和區(qū)別。

setTimeout()

MDN對 setTimeout 的定義為：

在指定的延遲時間之后調(diào)用一個函數(shù)或執(zhí)行一個代碼片段。
語法

setTimeout 的語法非常簡單，第一個參數(shù)為回調(diào)函數(shù)，第二個參數(shù)為延時的時間。函數(shù)返回一個數(shù)值類型的ID唯一標(biāo)示符，此ID可以用作 clearTimeout 的參數(shù)來取消定時器：

var timeoutID = window.setTimeout(code, delay);

IE0+ 還支持回調(diào)參數(shù)的傳入：

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
setInterval()

MDN 對 setInterval 的定義為：

周期性地調(diào)用一個函數(shù)(function)或者執(zhí)行一段代碼。

由于 setInterval 和 setTimeout 的用法一樣，所以這里不再列出。

對第二個參數(shù)（delay）的說明

由于javascript 的事件循環(huán)機制，導(dǎo)致第二個參數(shù)并不代表延遲delay毫秒之后立即執(zhí)行回調(diào)函數(shù)，而是嘗試將回調(diào)函數(shù)加入到事件隊列。實際上，setTimeout 和 setInterval 在這一點上處理又存在區(qū)別：

setTimeout：延時delay毫秒之后，啥也不管，直接將回調(diào)函數(shù)加入事件隊列。

setInterval: 延時delay毫秒之后，先看看事件隊列中是否存在還沒有執(zhí)行的回調(diào)函數(shù)（setInterval的回調(diào)函數(shù)），如果存在，就不要再往事件隊列里加入回調(diào)函數(shù)了。

所以，當(dāng)我們的代碼中存在耗時的任務(wù)時，定時器并不會表現(xiàn)的如我們所想的那樣。

通過一個例子來理解

下面的代碼，本來希望能夠在 100ms 和 200ms 的時候（也就是剛好等待 100ms）調(diào)用回調(diào)函數(shù)：

var timerStart1 = now();
setTimeout(function () {
  console.log("第一個setTimeout回調(diào)執(zhí)行等待時間：", now() - timerStart1);

  var timerStart2 = now();
  setTimeout(function () {
    console.log("第二個setTimeout回調(diào)執(zhí)行等待時間：", now() - timerStart2);
  }, 100);
}, 100);
// 輸出：
// 第一個setTimeout回調(diào)執(zhí)行等待時間： 106
// 第二個setTimeout回調(diào)執(zhí)行等待時間： 107

這樣的結(jié)果看上去正是我們所想的那樣，但是一旦我們在代碼中加入了耗時的任務(wù)時候，結(jié)果就不像我們所期望的那樣了：

var timerStart1 = now();
setTimeout(function () {
  console.log("第一個setTimeout回調(diào)執(zhí)行等待時間：", now() - timerStart1);

  var timerStart2 = now();
  setTimeout(function () {
    console.log("第二個setTimeout回調(diào)執(zhí)行等待時間：", now() - timerStart2);
  }, 100);

  heavyTask();  // 耗時任務(wù)
}, 100);

var loopStart = now();
heavyTask(); // 耗時任務(wù)
console.log("heavyTask耗費時間：", now() - loopStart);

function heavyTask() {
  var s = now();
  while(now() - s < 1000) {
  }
}

function now () {
  return new Date();
}
// 輸出：
// heavyTask耗費時間： 1015
// 第一個setTimeout回調(diào)執(zhí)行等待時間： 1018
// 第二個setTimeout回調(diào)執(zhí)行等待時間： 1000

兩個 setTimeout 的等待事件由于耗時任務(wù)的存在不再是 100ms 了！我們來描述一下事情的經(jīng)過：

首先，第一個耗時任務(wù)（heavyTask()）開始執(zhí)行，它需要大約 1000ms 才能執(zhí)行完畢。

從耗時任務(wù)開始執(zhí)行，過了 100ms， 第一個 setTimeout 的回調(diào)函數(shù)期望執(zhí)行，于是被加入到事件隊列，但是此時前面的耗時任務(wù)還沒執(zhí)行完，所以它只能在隊列中等待，直到耗時任務(wù)執(zhí)行完畢它才開始執(zhí)行，所以結(jié)果中我們開的看到的是： 第一個setTimeout回調(diào)執(zhí)行等待時間： 1018。

第一個 setTimeout 回調(diào)一執(zhí)行，又開啟了第二個 setTimeout， 這個定時器也是期望延時 100ms 之后能夠執(zhí)行它的回調(diào)函數(shù)。 但是，在第一個 setTimeout 又存在一個耗時任務(wù)，所有它的劇情跟第一個定時器一樣，也等待了 1000ms 才開始執(zhí)行。

可以用下面的圖來概括：

再來看 setInterval 的一個例子：

var intervalStart = now();
setInterval(function () {
  console.log("interval距定義定時器的時間：", now() - loopStart);
}, 100);

var loopStart = now();
heavyTask();
console.log("heavyTask耗費時間：", now() - loopStart);

function heavyTask() {
  var s = now();
  while(now() - s < 1000) {
  }
}

function now () {
  return new Date();
}
// 輸出：
// heavyTask耗費時間： 1013
// interval距定義定時器的時間： 1016
// interval距定義定時器的時間： 1123
// interval距定義定時器的時間： 1224

上面這段代碼，我們期望每隔 100ms 就打出一條日志。相對于 setTimeout 的區(qū)別， setInterval 在準(zhǔn)備把回調(diào)函數(shù)加入到事件隊列的時候，會判斷隊列中是否還有未執(zhí)行的回調(diào)，如果有的話，它就不會再往隊列中添加回調(diào)函數(shù)。 不然，會出現(xiàn)多個回調(diào)同時執(zhí)行的情況。

可以用下面的圖來概括：

總結(jié)

上面對javascript定時器執(zhí)行原理進(jìn)行了簡要的分析，希望能夠幫助我們更深入的理解javascript。文中有描述不當(dāng)?shù)牡胤娇梢栽谠u論中指出。

文章地址：http://blog.mcbird.cn/2015/09/18/javascript-timers/

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

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

相關(guān)文章

  • JavaScript的計時器的工作原理

    摘要：創(chuàng)建了一個簡單的計時器，在經(jīng)過給定的時間后，回調(diào)函數(shù)將會被執(zhí)行。接受一個計時器由之前兩種計時器返回并且停止計時器回調(diào)函數(shù)的執(zhí)行。然而，我們可以注意到，當(dāng)定時器再一次觸發(fā)在計時器回調(diào)函數(shù)正在執(zhí)行的時候，這一次定時器回調(diào)函數(shù)被丟棄了。 最近都在看一些JavaScript原理層面的文章，恰巧看到了jQuery的作者的一篇關(guān)于JavaScript計時器原理的解析，于是誠惶誠恐地決定把原文翻譯成...

    geekzhou 評論0 收藏0

  • Javascript定時器那些事兒

    摘要：一什么是定時器提供了一些原生方法來實現(xiàn)延時去執(zhí)行某一段代碼，下面來簡單介紹一下設(shè)置一個定時器，在定時器到期后執(zhí)行一次函數(shù)或代碼段定時器延遲后執(zhí)行的函數(shù)延遲后執(zhí)行的代碼字符串，不推薦使用原理類似延遲的時間單位毫秒，默認(rèn)值為向延遲函數(shù)傳遞而外的 一、什么是定時器 JS提供了一些原生方法來實現(xiàn)延時去執(zhí)行某一段代碼，下面來簡單介紹一下 setTimeout: 設(shè)置一個定時器，在定時器到期后執(zhí)行...

    Riddler 評論0 收藏0

  • JavaScript 工作原理之四－事件循環(huán)及異步編程的出現(xiàn)和 5 種更好的 async/await

    摘要：函數(shù)會在之后的某個時刻觸發(fā)事件定時器。事件循環(huán)中的這樣一次遍歷被稱為一個。執(zhí)行完畢并出棧。當(dāng)定時器過期，宿主環(huán)境會把回調(diào)函數(shù)添加至事件循環(huán)隊列中，然后，在未來的某個取出并執(zhí)行該事件。 原文請查閱這里，略有改動。 本系列持續(xù)更新中，Github 地址請查閱這里。 這是 JavaScript 工作原理的第四章。 現(xiàn)在，我們將會通過回顧單線程環(huán)境下編程的弊端及如何克服這些困難以創(chuàng)建令人驚嘆...

    maochunguang 評論0 收藏0

  • 談?wù)勎覍s中定時器的一點理解

    摘要：這兩個函數(shù)接受定時器的例如我們上面提到的兩個函數(shù)產(chǎn)生的定時器，并停止對定時器中指定函數(shù)的調(diào)用。注意，定時器雖然觸發(fā)了，但是并不會立即執(zhí)行，它只是把需要延遲執(zhí)行的函數(shù)加入了執(zhí)行隊列，在線程的某一個可用的時間點，這個函數(shù)就能夠得到執(zhí)行。 擼了今年阿里、頭條和美團(tuán)的面試，我有一個重要發(fā)現(xiàn)....... javascript定時器工作原理是一個重要的基礎(chǔ)知識點。因為定時器在單線程中工作，它們表...

    frontoldman 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<