JavaScript計時器：你須要瞭解的全部內容

時間 2020-10-10

標籤 javascript 前端 java node git 程序員 github 面試 segmentfault 瀏覽器欄目 JavaScript 简体版

原文原文鏈接

做者：Samer Buna
翻譯：瘋狂的技術宅javascript

原文：https://medium.com/edge-coder...前端

未經容許嚴禁轉載java

先從一個面試題開始：node

JavaScript 面試題：
setTimeout 和 setInterval 的源代碼是在哪裏實現的？（不能百度和谷歌😎 ）git

在繼續往下看以前，請先在你的頭腦中回答問題程序員

你的答案可能會是 V8（或其餘VM），但很遺憾，這是錯的。儘管「JavaScript Timers」的應用很普遍，可是 setTimeout 和 setInterval 之類的函數並非 ECMAScript 規範或任何一種 JavaScript 引擎實現的一部分。Timer 函數是由瀏覽器實現的，不一樣瀏覽器的實現方式會有所不一樣。同時 Timer 也是由 Node.js 運行時自己實現的。github

在瀏覽器中，主要的計時器函數是 Window 接口的一部分，這個接口還有一些其餘函數和對象。該接口使其全部元素在主 JavaScript 做用域內全局可用。這就是爲何你能夠直接在瀏覽器的控制檯中執行 setTimeout 的緣由。面試

在 Node 中，計時器是 global 對象的一部分，該對象的行爲相似於瀏覽器的 window 。你能夠在 Node 的源代碼中找到它的實現。segmentfault

有些人可能認爲這個面試題不咋樣，可是我認爲你應該瞭解這個，由於若是你不瞭解這一點，則可能代表你並不徹底瞭解 V8（及其餘VM）是如何與瀏覽器和 Node 交互的。瀏覽器

如下是一些關於計時器函數的例子和編碼挑戰的練習：

延遲函數的執行

定時器函數是高階函數，可用於延遲或重複其餘函數的執行（它們做爲第一個參數）。

如下是延遲執行的例子：

// example1.js

setTimeout(
  () => {
    console.log('Hello after 4 seconds');
  },
  4 * 1000
);

本例用 setTimeout 將 console.log 的輸出延遲4秒。 setTimeout 的第二個參數是延遲時間（以毫秒爲單位）。這就是爲何要用 4 乘以 1000 的緣由。

setTimeout 的第一個參數是你想要延遲執行的函數。

若是用 node 命令執行 example1.js 文件，Node 會暫停 4。秒鐘，而後輸出一行消息，以後退出。

注意，setTimeout 的第一個參數只是一個函數引用。也能夠不像 example1.js 那樣使用內聯函數。下面是不用內聯函數的相同功能的代碼：

const func = () => {
  console.log('Hello after 4 seconds');
};

setTimeout(func, 4 * 1000);

傳遞參數

若是要讓用 setTimeout 延遲執行的函數接受參數，能夠將 setTimeout 自己其他的參數用於將參數值傳遞給所延遲的函數。

// 函數: func(arg1, arg2, arg3, ...)
// 能夠用: setTimeout(func, delay, arg1, arg2, arg3, ...)

這是一個例子：

// example2.js

const rocks = who => {
  console.log(who + ' rocks');
};

setTimeout(rocks, 2 * 1000, 'Node.js');

上面的 rocks 函數延遲了 2 秒，它接受參數 who，而 setTimeout 調用將值「Node.js」用於 who 參數。

用 node 命令執行 example2.js 將會在 2 秒鐘後打印出「Node.js rocks」。

計時器編碼挑戰 #1

如今用你在前面所學到的關於 setTimeout 的知識，在要求的延遲時間後輸出如下 2 條內容。

4 秒鐘後輸出「Hello after 4 seconds」
8 秒鐘後輸出「Hello after 8 seconds」。

要求：

你只能定義一個函數，這其中包括內聯函數。這意味着你全部的 setTimeout 調用將必須使用徹底相同的函數。

解決方案

這是個人方法：

// solution1.js

const theOneFunc = delay => {
  console.log('Hello after ' + delay + ' seconds');
};

setTimeout(theOneFunc, 4 * 1000, 4);
setTimeout(theOneFunc, 8 * 1000, 8);

我已經使 theOneFunc 接收了一個 delay 參數，並在輸出的消息中使用了 delay 參數的值。這樣該函數能夠根據傳遞給它的延遲值來輸出不一樣的消息。

而後，我在兩個 setTimeout 調用中使用了 theOneFunc，一個在 4 秒後觸發，另外一個在 8 秒後觸發。這兩個setTimeout 調用都用到了第三個參數來表示 theOneFunc 的 delay 參數。

最後用 node 命令執行 solution1.js 文件，第一條消息輸出在 4 秒鐘後，第二條消息在 8 秒鐘後。

重複執行一個函數

若是要求你一直每隔 4 秒鐘輸出一條消息怎麼辦？

儘管你能夠將 setTimeout 放入循環中，可是計時器 API也提供了 setInterval 函數，這可以知足一直作某件事的要求。

下面是 setInterval 的例子：

// example3.js

setInterval(
  () => console.log('Hello every 3 seconds'),
  3000
);

本例將會每 3 秒輸出一次消息。用 node 命令執行 example3.js 將會使 Node 一直輸出這個消息，直到你用 CTRL + C 終止進程爲止。

取消計時器

由於調用計時器函數會實現計劃一個動做，因此該動做也能夠在執行以前取消。

調用 setTimeout 會返回一個計時器 ID，能夠把計時器 ID 當作參數傳給 clearTimeout 函數來取消它。下面一個例子：

// example4.js

const timerId = setTimeout(
  () => console.log('你看不到這行輸出！'),
  0
);

clearTimeout(timerId);

這個簡單的計時器應該在 0 毫秒後被觸發（使其當即生效），但實際上並不會，由於此時咱們正在獲取 timerId 值，並在調用 clearTimeout 以後當即將其取消。

用 node 命令執行 example4.js 時，Node 不會輸出任何內容，而程序將會退出。

順便說一句，在 Node.js 中，還有另外一種方法對 0 ms 進行 setTimeout 。 Node.js 計時器 API 還有一個名爲 setImmediate 的函數，它與前面 0 毫秒的 setTimeout 基本上相同，可是不用指定延遲時間：

setImmediate(
  () => console.log('我等效於 0 毫秒的 setTimeout'),
);

setImmediate 函數並不是在全部瀏覽器中均可用。千萬不要用在前端代碼中。

和 clearTimeout 相似，還有一個 clearInterval 函數，除了對 setInerval 的調用外，它們的功能相同，並且也有 clearImmediate 的調用。

定時器延遲是不可以徹底保證的

在上一個例子中，你可能注意到了，若是用 setTimeout 在 0 毫秒以後執行某個操做，並不意味着會立刻執行它（在 setTimeout 這一行以後），而是在腳本中的全部其餘內容（ clearTimeout 這一行）以後纔會執行它的調用。

// example5.js

setTimeout(
  () => console.log('Hello after 0.5 seconds. MAYBE!'),
  500,
);

for (let i = 0; i < 1e10; i++) {
  // 同步阻塞
}

在這個例子中定義了計時器以後，咱們當即經過一個大的 for 循環來阻塞運行。 1e10 的意思是 1 前面有 10 個零，因此這個循環是 100 億次循環（基本上模擬了繁忙的 CPU）。在循環時 Node 沒法執行任何操做。

固然，這在實際開發中很是糟糕，可是它能幫你瞭解 setTimeout 延遲是沒法保證立刻就開始的事實。 500 ms 表示最小延遲爲 500 ms。實際上，這段腳本將會執行很長的時間。它必須先等待阻塞循環才能開始。

計時器編碼挑戰 #2

編寫一段腳本，每秒輸出一次消息「Hello World」，但僅輸出 5 次。 5 次後，腳本應輸出消息「Done」並退出。

要求：不能用 setTimeout。

提示：你須要一個計數器。

解決方案

這是個人方法：

let counter = 0;
const intervalId = setInterval(() => {
  console.log('Hello World');
  counter += 1;if (counter === 5) {
    console.log('Done');
    clearInterval(intervalId);
  }
}, 1000);

把 counter 的值初始化爲 0，而後經過 setInterval 獲得其 ID。

延遲函數將輸出消息並使計數器加 1。在函數內部的 if 語句中檢查如今是否已經輸出 5 次了，若是是的話，則輸出「Done」並用 intervalId 常數清理。間隔延遲爲 1000 毫秒。

到底是誰調用了延遲函數？

當在常規函數中使用 JavaScript 的 this 關鍵字時，以下所示：

function whoCalledMe() {
  console.log('Caller is', this);
}

在關鍵字 this 中的值將表明函數的調用者。若是你在 Node REPL 內定義以上函數，則調用方將是 global 對象。若是在瀏覽器的控制檯中定義函數，則調用方將是 window 對象。

下面把函數定義爲對象的屬性，這樣能夠看的更加清楚：

const obj = { 
  id: '42',
  whoCalledMe() {
    console.log('Caller is', this);
  }
}; // 如今，函數引用爲：obj.whoCallMe

如今，當你直接用其引用去調用 obj.whoCallMe 函數時，調用者將是 obj 對象（由其 ID 進行標識）：

如今的問題是，若是把 obj.whoCallMe 的引用傳遞給 setTimetout 調用，調用者將會是誰？

// 將會輸出什麼？
setTimeout(obj.whoCalledMe, 0);

在這種狀況下，調用者會是誰？

根據執行計時器函數的位置不一樣，答案也不同。在當前這種狀況下，根本沒法肯定調用者是誰。你會失去對調用者的控制，由於計時器只是其中的一種可能。若是你在 Node REPL 中對其進行測試，則會看到調用者是一個 Timetout 對象：

注意，在常規函數中使用 JavaScript 的 this 關鍵字時這很是重要。若是你使用箭頭函數的話，則無需擔憂調用者是誰。

計時器編碼挑戰 #3

編寫一段腳本，連續輸出消息「Hello World」，可是每次延遲都不一致。從 1 秒開始，而後每次增長 1 秒。即第二次會有 2 秒的延遲，第三時間會有3秒的延遲，依此類推。

若是在輸出的消息中包含延遲。預期的輸出以下：

Hello World. 1
Hello World. 2
Hello World. 3
...

要求： 你只能用 const 來定義變量，不能用 let 或 var。

解決方案

因爲延遲量是這項挑戰中的變量，所以在這裏不能用 setInterval，可是能夠在遞歸調用中使用 setTimeout 手動建立執行間隔。第一個使用 setTimeout 執行的函數將會建立另外一個計時器，依此類推。

另外，由於不能用 let 和 var，因此咱們沒有辦法用計數器來增長每次遞歸調用中的延遲，可是可使遞歸函數的參數在遞歸調用中遞增。

下面的方法供你參考：

const greeting = delay =>
  setTimeout(() => {
    console.log('Hello World. ' + delay);
    greeting(delay + 1);
  }, delay * 1000);
greeting(1);

計時器編碼挑戰 #4

編寫一段腳本，用和挑戰#3 相同的可變延遲概念連續輸出消息「Hello World」，可是此次，每一個主延遲間隔以 5 條消息爲一組。前 5 條消息的延遲爲 100ms，而後是下 5 條消息的延遲爲 200ms，而後是 300ms，依此類推。

腳本的行爲以下：

在 100 毫秒時，腳本開始輸出「Hello World」，並以 100 毫秒的間隔執行 5 次。第一條消息將在 100 毫秒顯示，第二條消息在 200 毫秒出現，依此類推。
在輸出前 5。條消息以後，腳本應將主延遲增長到 200ms。因此第 6 條消息將在 500 ms + 200 ms（700ms）時輸出，第 7 條消息將在 900ms 輸出，第 8。條消息將在 1100ms 輸出，依此類推。
10 條消息後，腳本把主延遲增長到 300ms。因此第 11 條消息應該在 500ms + 1000ms + 300ms（18000ms）時輸出。第 12 條消息在 21000ms 輸出，依此類推。
一直延續這個模式。

在輸出的消息中包含延遲。預期的輸出以下所示（不帶註釋）：

Hello World. 100  // At 100ms
Hello World. 100  // At 200ms
Hello World. 100  // At 300ms
Hello World. 100  // At 400ms
Hello World. 100  // At 500ms
Hello World. 200  // At 700ms
Hello World. 200  // At 900ms
Hello World. 200  // At 1100ms
...

要求： 只能用 setInterval （不能用 setTimeout），而且只能用一個 if 語句。

解決方案

由於只能用 setInterval ，因此在這裏須要經過遞歸來增長下一次 setInterval 調用的延遲。另外還須要一個 if 語句，用來控制在對該遞歸函數的 5 次調用以後執行該操做。

下面的解決方案供你參考：

let lastIntervalId, counter = 5;const greeting = delay => {
  if (counter === 5) {
    clearInterval(lastIntervalId);
    lastIntervalId = setInterval(() => {
      console.log('Hello World. ', delay);
      greeting(delay + 100);
    }, delay);
    counter = 0;
  }counter += 1;
};greeting(100);