setTimeout(f,0)的作用及使用场景

2019-11-11 14:35:53 浏览数 (2)

介绍下setTimeout(0)的作用及简单应用场景

# 作用简述

setTimeout(f,0)的作用很简单,就是为了把f放到运行队列的最后去执行。

就是说,无论setTimeout(f,0)写在哪,都可以保证在队列的最后执行,因为它是异步操作。

js主线程会优先完成同步任务,在同步任务执行过程中,不会执行其它任务,setTimeout的定时到了执行时间,JS主线程仍然还在执行同步任务,setTimeout所指定的方法并不会立刻执行,当js主线程空闲,异步任务队列中只有setTimeout执行的方法时,才会继续执行setTimeout里的function。

setTimeout(f,0)做的事情:在指定delay约0秒后,将指定方法f作为异步任务添加到异步任务队列中。

为啥是异步操作?

通过chrome浏览器架构学习一文我们知道setTimeout是由定时触发器线程来控制的,另起了一个线程,所以是异步操作。

计时精度

setTimeout第二个参数为0表示立即执行(实际上有一定延迟,视浏览器计时精度而定)。

⬇️

计时精度如下:

  • IE8及更早版本的计时器精度为15.625ms
  • IE9及更晚版本的计时器精度为4ms
  • Firefox和Safari的计时器精度大约为10ms
  • Chrome的计时器精度为4ms

当使用这个方法的时候,浏览器会另起一个线程,来执行setTimeout里面的函数,而原有的线程继续执行。

至于与setTimeout后继的同步函数的执行顺序或者执行快慢,并没有固定的答案,视浏览器而定了。

# 简单应用场景

监控input或者textarea中文本的变化

当使用鼠标右键操作进行粘贴或剪切时,控制台输入的文本内容是操作前的旧内容。为了获取操作后的新文本内容,可以将对文本的获取和处理放在setTimeout中延时执行

代码语言:javascript复制
// 响应键盘输入,粘贴和剪切事件
$('#input').on('keyup paste cut', function() {
    var $this = $(this);
    setTimeout(function(){ // 使鼠标粘贴和剪切时,输入框内内容为最新
        console.log($this.val());
    }, 0)
});

setTimeout能够影响代码的执行顺序和时机,合理使用能够让更重要的代码优先执行,fix特定场景下奇怪的bug等等。

0 人点赞