介绍下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等等。