关于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.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);

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

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

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

• 深刻了解 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 个计划及实现

• 更多文章 …