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

介绍下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中延时执行

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

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