走位setTimeout，回手掏Event Loop

最新推荐文章于 2022-09-06 10:54:53 发布

weixin_34242658

最新推荐文章于 2022-09-06 10:54:53 发布

阅读量447

点赞数

原文链接：https://juejin.im/post/5cc57b435188252dd006cc32

版权

本文仅是技术验证，记录，交流，不针对任何人。有冒犯的地方，请谅解。本文首发于https://vsnail.cn/static/doc/blog/setTimeout.html

本想喝着coffee,看着娃,过一个恬静的周六。occasionally,浏览到一段代码，觉的蛮有趣。


setTimeout(function(){console.log(1)},30)

setTimeout(function(){console.log(2)},10)

setTimeout(function(){console.log(3)},0)

let now = new Date();

while(new Date() - now<100){

}

console.log(0);

复制代码

估计大部分人都会知道第一个输出会是0（如果还不知道为什么0会先输出，也没有关系，看完整篇文章你就会知道了）. 但是后面输出的顺序到底是3>2>1还是1>2>3，估计就有争议了。

回手掏，鬼刀一开看不见，走位走位，手里干

走位，走位（简单使用setTimeout）

想知道上面的答案？等着，让我们先来看看setTimeout相关基础。

setTimeout() 方法可以设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。

最简单的示例：

100ms后弹出系统对话框。（非严谨的，用俚语表述的需求。。。莫怪）


    setTimeout(function(){
        alert('走位，走位')
    }，100)

复制代码

好简单的，是不？地球人都知道的东西，再写就没意思了。接下来写点可能会不知道的东东。

1.函数参数的个数问题

let timer = window.setTimeout(fun\[,delay,param1,param2,...]);
复制代码

我们常用的就两个参数，估计一个参数，或者多于两个参数的情况用的比较少。只有一个参数时，延迟时间默认为0；有多于两个参数时，除开第一和第二参数的其他参数，我们称之为“附加参数”。附加参数都会做为回调函数的参数传递。


let func = function(a,b){
    console.log(a+b); 
}

setTimeout(func,100,10,20); //30

复制代码

2.用于防抖

防抖:在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。


function debounce(fn, wait) {
  var timer = null;
  return function () {
      var context = this
      var args = arguments
      if (timer) {
          clearTimeout(timer);
          timer = null;
      }
      timer = setTimeout(function () {
          fn.apply(context, args)
      }, wait)
  }
}

复制代码

3.轮循任务（setInterval）

js中可以使用setInterval开启轮询，但是这种存在一个问题就是执行间隔往往就不是你希望的间隔时间。使用setTimeout构造轮询能保证每次轮询的间隔。

4.程序切片

我们都清楚js是单线程的，意味着js处理大数据的时候，容易处于‘假死’状态。那么这个时候，我们可以利用setTimeout进行切片，来避免‘假死’状态的出现。

let func = function(index){
    ....
}

for(let i=0,l=10000000000;i<l;i++){
    (function(index){
        setTimeout(function(){func(index)},0)
    })(i)
}

复制代码

基本setTimeout常用的用法就是这些。

回手掏（setTimeout原理及javaScript运行机制之event loop）

走位完了，让我们一起回手掏掏他们的原理和机制。

js 单线程

我们都知道，现代浏览器每个标签页就是一个进程，每个进程下面又包含了各种线程，比如javaScript线程，渲染线程，请求线程等等。也就是说js是单线程的。估计有人要问了为什么js是单线程呢，为什么不是多线程呢？其实这和js的用途有关系。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。

OK，js是单线程，那么我们可以得出setTimeout绝对不是开启另一个线程来实现异步的。那setTimeout是如何达到异步效果的呢？

任务队列

在js中，所有任务都分为同步任务和异步任务两大类。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。

只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会不断重复。

"任务队列"是一个先进先出的数据结构，排在前面的事件，优先被主线程读取。主线程的读取过程基本上是自动的，只要执行栈一清空，"任务队列"上第一位的事件就自动进入主线程。

Event loop

主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。

这里一定要分清楚task queue 和Event loop概念。之前，发现很多人总是分不清楚task queue 和 Event loop概念。说setTimeout原理时，每每有人说到是将回调函数放入到事件队列里面，然后。。。。。。；真觉的这样的说法不太好。

setTimeout理解

个人推测，每当调用setTimeout方法，实际上是向一个缓存对象写入一个键值对（以数字为键，以回调函数为值）。当到达指定延迟时间后，才将回调函数放入到task queue中，等待进入执行栈。

独特例子分析

在回手掏完之后，基本上setTimeout以及js运行机制应该大概明白了。通过以上的原理及机制，我们来分析一下下面的几个例子（包含之前没有说道的setTimeout的注意项）：

开篇代码解析


setTimeout(function(){console.log(1)},30)

setTimeout(function(){console.log(2)},10)

setTimeout(function(){console.log(3)},0)

let now = new Date();

while(new Date() - now<100){

}

console.log(0);

复制代码

这段代码在执行栈中执行顺序为：

声明变量now；
2. 向setTimeout缓存对象中放入延迟30毫秒执行的回调函数（这个回调函数我们标记为func3）；
3. 向setTimeout缓存对象中放入延迟10毫秒执行的回调函数（这个回调函数我们标记为func2）；
4. 向setTimeout缓存对象中放入延迟0毫秒执行的回调函数（这个回调函数我们标记为func1）；
5. 向变量now赋值当前时间；
6. 一直循环100ms；

6.1. 在0ms时，将回调函数func1放入task queue中。
6.2. 在10ms时，将回调函数func2放入task queue中。
6.3. 在30ms时，将回调函数func3放入task queue中。

向控制台打印0；
执行栈空闲，从task queue中提取第一个任务（func1）。执行完func1后，再从task queue 中提取一个任务（func2）。执行完func2后，再从task queue 中提取一个任务（func3）.

以上就是整个代码的大概执行流程。因此，我们得到的打印顺序为 0>3>2>1。这个里面主要是要理解，调用setTimeout方法并不是直接将回调函数放入task queue中，而是等到到达指定延时后，才将回调函数放入task queue中。

最大延迟时长

也许你经常用几秒或者几十秒做延迟时间，估计你很少会想到setTimeout能设置的最大的延迟时间是多少呢？或者如果超出setTimeout的最大延迟时长，又会怎么样？

在一篇文章上看到过，setTimout最大延迟时长是用32位有符号数存储的，因此他的最大值应该是Math.pow(2,31)-1=2147483647,那么换算成天，大约就是24.8天。如果设置的时长大于2147483647，那么setTimeout的延时时长将会自动设置为0；


setTimeout(function(){console.log(1)},2147483648)

setTimeout(function(){console.log(2)},2147483647)

复制代码

你会看到，控制台会立即输出1，而2却没有输出，如果上面的结论是正确的，要想看到2，估计要等24.8天了。嘿嘿，反正我是不准备等的了。。。有想尝试的兄弟，可以试了以后告知下。

延时时长0

在MDN上看到这么一句话，“delay取默认值0，意味着“马上”执行，或者尽快执行。”

也就是说将延时时长设置为0，是在有条件的情况下尽快执行。但真的是0毫秒就放入task queue中吗？

我们来看段代码：


setTimeout(function(){
    console.log(2)
},2)

setTimeout(function(){
    console.log(6)
},6)

setTimeout(function(){
    console.log(1)
},1)

setTimeout(function(){
    console.log(3)
},3)

setTimeout(function(){
    console.log(0)
},0)

复制代码

这样的一段代码，可能会有些人认为他的输出结果是：0>1>2>3>6.实际情况却不是这样的，实际输出确是1>0>2>3>6.

有人解释说，这是因为从执行延时1ms的延时函数，到执行0ms的延时函数，中间超过了1ms，导致延时1ms的回调函数先于延时0ms的回调函数进入task queue中。但是这种说法真不能苟同，如果这样都需要1ms那么js的运行效率也太低了。而且可以在1ms的延时函数和0ms的延时函数打印时间戳，可以发现，根本不可能是运行超过1ms导致的结果。

那么我们将1ms的延时函数和0ms的延时函数任意交换位置可以发现，谁在前面谁先进入task queue。那么可以大胆推论，其实延时0ms与延时1ms是等价的（这个结论是自我推导的，不一定正确）。因此才有了1>0>2>3>6输出顺序。

最小间隔时长

有人会说上面例子输出结果是因为setTimeout的最小间隔时长导致的。最小间隔时长，是个很恶心的概念，最初接触的时候没有正确理解，导致一度认为这个最小间隔时长有问题。

我们来看看最小间隔时长在MDN上面的解释。在MDN上面它不叫“最小间隔时长”，而是叫做“最小延迟时间”。在以前，最小间隔时长通常为10ms，现在的现代浏览器通常为4ms（根据各个浏览器的不同会有些差异）。一直以来，都被“最小延迟时间”这个名词所误导，总认为延时时长必须大于等于最小延迟时间。但是，各种测试总是实现不了或者验证不了这个“最小延迟时间”。在读MDN的时候，发现它有这么一句话"这通常是由于函数嵌套导致（嵌套层级达到一定深度），或者是由于已经执行的setInterval的回调函数阻塞导致".

在浏览器中，setTimeout()/setInterval() 的每调用一次定时器的最小间隔是4ms，这通常是由于函数嵌套导致（嵌套层级达到一定深度），或者是由于已经执行的setInterval的回调函数阻塞导致的

这才焕然大悟，原来“最小延迟时间”是有限制条件的，他的限制条件就是函数嵌套到达一定深度，或者setInterval回调阻塞。

那么接下来我们就用一段代码验证下：


function doFunc(count){
    console.time('time total:')
    let timeFunc = function(){
        if(count>=0){
            setTimeout(timeFunc,0)
            count --;
        }else{
            console.timeEnd('time total:')
        }
    }
    timeFunc()
}
doFunc(10)

复制代码