setTimeout和setInterval的运行机制

我就是我 2022-12-09 03:29 164阅读 0赞

setTimeout和setInterval的运行机制是，将指定的代码移出本次执行，等到下一轮Event Loop时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮Event Loop时重新判断。

这意味着，setTimeout和setInterval指定的代码，必须等到本轮EventLoop的所有同步任务都执行完，再等到本轮Event Loop的“任务队列”的所有任务执行完，才会开始执行。由于前面的任务到底需要多少时间执行完，是不确定的，所以没有办法保证，setTimeout和setInterval指定的任务，一定会按照预定时间执行。

setTimeout(someTask, 100);

veryLongTask();

上面代码的setTimeout，指定100毫秒以后运行一个任务。但是，如果后面的veryLongTask函数（同步任务）运行时间非常长，过了100毫秒还无法结束，那么被推迟运行的someTask就只有等着，等到veryLongTask运行结束，才轮到它执行。

这一点对于setInterval影响尤其大。

setInterval(function () \{

console.log(2);

\}, 1000);

(function () \{

sleeping(3000);

\})();

上面的第一行语句要求每隔1000毫秒，就输出一个2。但是，第二行语句需要3000毫秒才能完成，请问会发生什么结果？

结果就是等到第二行语句运行完成以后，立刻连续输出三个2，然后开始每隔1000毫秒，输出一个2。也就是说，setIntervel具有累积效应，如果某个操作特别耗时，超过了setInterval的时间间隔，排在后面的操作会被累积起来，然后在很短的时间内连续触发，这可能或造成性能问题（比如集中发出Ajax请求）。

## 5 setTimeout(f,0) ##

setTimeout的作用是将代码推迟到指定时间执行，如果指定时间为0，即setTimeout(f, 0)，那么会立刻执行吗？

答案是不会。因为上一段说过，必须要等到当前脚本的同步任务和“任务队列”中已有的事件，全部处理完以后，才会执行setTimeout指定的任务。也就是说，setTimeout的真正作用是，在“消息队列”的现有消息的后面再添加一个消息，规定在指定时间执行某段代码。setTimeout添加的事件，会在下一次Event Loop执行。

setTimeout(f, 0)将第二个参数设为0，作用是让f在现有的任务（脚本的同步任务和“消息队列”指定的任务）一结束就立刻执行。也就是说，setTimeout(f, 0)的作用是，尽可能早地执行指定的任务。而并不是会立刻就执行这个任务。

setTimeout(function () \{

console.log('你好！');

\}, 0);

上面代码的含义是，尽可能早地显示“你好！”。

setTimeout(f, 0)指定的任务，最早也要到下一次EventLoop才会执行。请看下面的例子。

setTimeout(function() \{

console.log("Timeout");

\}, 0);

function a(x) \{

console.log("a()开始运行");

b(x);

console.log("a()结束运行");

function b(y) \{

console.log("b()开始运行");

console.log("传入的值为" + y);

console.log("b()结束运行");

console.log("当前任务开始");

a(42);

console.log("当前任务结束");

// 当前任务开始

// a() 开始运行

// b() 开始运行

// 传入的值为42

// b() 结束运行

// a() 结束运行

// 当前任务结束

// Timeout

上面代码说明，setTimeout(f, 0)必须要等到当前脚本的所有同步任务结束后才会执行。

即使消息队列是空的，0毫秒实际上也是达不到的。根据[HTML 5标准][HTML 5]，setTimeout推迟执行的时间，最少是4毫秒。如果小于这个值，会被自动增加到4。这是为了防止多个setTimeout(f, 0)语句连续执行，造成性能问题。

另一方面，浏览器内部使用32位带符号的整数，来储存推迟执行的时间。这意味着setTimeout最多只能推迟执行2147483647毫秒（24.8天），超过这个时间会发生溢出，导致回调函数将在当前任务队列结束后立即执行，即等同于setTimeout(f, 0)的效果。

[https://blog.csdn.net/jasonzds/article/details/53714850][https_blog.csdn.net_jasonzds_article_details_53714850]

[HTML 5]: http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers
[https_blog.csdn.net_jasonzds_article_details_53714850]: https://blog.csdn.net/jasonzds/article/details/53714850