关于javascript:JavaScript计时器你需要了解的所有内容

作者：Samer Buna
翻译：疯狂的技术宅
原文：https://medium.com/edge-coder...
未经容许严禁转载

先从一个面试题开始：

JavaScript 面试题：
setTimeout 和 setInterval 的源代码是在哪里实现的？（不能百度和谷歌???? ）

在持续往下看之前，请先在你的头脑中答复问题

你的答案可能会是 V8（或其余VM），但很遗憾，这是错的。只管 “JavaScript Timers” 的利用很宽泛，然而 setTimeout 和 setInterval 之类的函数并不是 ECMAScript 标准或任何一种 JavaScript 引擎实现的一部分。Timer 函数是由浏览器实现的，不同浏览器的实现形式会有所不同。同时 Timer 也是由 Node.js 运行时自身实现的。

在浏览器中，次要的计时器函数是 Window 接口的一部分，这个接口还有一些其余函数和对象。该接口使其所有元素在主 JavaScript 作用域内全局可用。这就是为什么你能够间接在浏览器的控制台中执行 setTimeout 的起因。

在 Node 中，计时器是 global 对象的一部分，该对象的行为相似于浏览器的 window 。你能够在 Node 的源代码中找到它的实现。

有些人可能认为这个面试题不咋样，然而我认为你应该理解这个，因为如果你不理解这一点，则可能表明你并不齐全理解 V8（及其他VM）是如何与浏览器和 Node 交互的。

以下是一些对于计时器函数的例子和编码挑战的练习：

提早函数的执行

定时器函数是高阶函数，可用于提早或反复其余函数的执行（它们作为第一个参数）。

以下是提早执行的例子：

// example1.jssetTimeout(  () => {    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.jsconst 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.jsconst 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.jssetInterval(  () => console.log('Hello every 3 seconds'),  3000);

本例将会每 3 秒输入一次音讯。用 node 命令执行 example3.js 将会使 Node 始终输入这个音讯，直到你用 CTRL + C 终止过程为止。

勾销计时器

因为调用计时器函数会实现打算一个动作，所以该动作也能够在执行之前勾销。

调用 setTimeout 会返回一个计时器 ID，能够把计时器 ID 当做参数传给 clearTimeout 函数来勾销它。上面一个例子：

// example4.jsconst 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.jssetTimeout(  () => 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. 1Hello World. 2Hello 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 100msHello World. 100  // At 200msHello World. 100  // At 300msHello World. 100  // At 400msHello World. 100  // At 500msHello World. 200  // At 700msHello World. 200  // At 900msHello 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);

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

深刻了解Shadow DOM v1
一步步教你用 WebVR 实现虚拟现实游戏
13个帮你进步开发效率的古代CSS框架
疾速上手BootstrapVue
JavaScript引擎是如何工作的？从调用栈到Promise你须要晓得的所有
WebSocket实战：在 Node 和 React 之间进行实时通信
对于 Git 的 20 个面试题
深刻解析 Node.js 的 console.log
Node.js 到底是什么？
30分钟用Node.js构建一个API服务器
Javascript的对象拷贝
程序员30岁前月薪达不到30K，该何去何从
14个最好的 JavaScript 数据可视化库
8 个给前端的顶级 VS Code 扩大插件
Node.js 多线程齐全指南
把HTML转成PDF的4个计划及实现

更多文章...