先从一个面试题开始：
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);
相关免费学习推荐：js视频教程
以上就是你需要知道的关于javascript计时器的所有内容的详细内容。