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

简介: setTimeout(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等等。

相关文章
|
前端开发 Go
15 # promise 延迟对象的作用
15 # promise 延迟对象的作用
75 0
|
4月前
|
存储 前端开发 JavaScript
node中循环异步的问题[‘解决方案‘]_源于map循环和for循环对异步事件配合async、await的支持
本文探讨了在Node.js中处理循环异步操作的问题,比较了使用map和for循环结合async/await处理异步事件的差异,并提供了解决方案。
50 0
|
7月前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包是函数访问外部作用域变量的能力体现,它用于封装私有变量、持久化状态、避免全局污染和处理异步操作。
【6月更文挑战第25天】JavaScript闭包是函数访问外部作用域变量的能力体现,它用于封装私有变量、持久化状态、避免全局污染和处理异步操作。闭包基于作用域链和垃圾回收机制,允许函数记住其定义时的环境。例如,`createCounter`函数返回的内部函数能访问并更新`count`,每次调用`counter()`计数器递增,展示了闭包维持状态的特性。
57 5
|
6月前
|
Java
回调函数在异步编程中的作用与实现方式
回调函数在异步编程中的作用与实现方式
|
6月前
|
JavaScript 前端开发 API
js 运行机制(含异步机制、同步任务、异步任务、宏任务、微任务、Event Loop)
js 运行机制(含异步机制、同步任务、异步任务、宏任务、微任务、Event Loop)
56 0
|
8月前
|
前端开发 Java
Promise--代码实现-- ajax 传统方式和 promise 方式和 promise 代码优化/重排 方式的对比--综合代码示例
Promise--代码实现-- ajax 传统方式和 promise 方式和 promise 代码优化/重排 方式的对比--综合代码示例
62 0
|
前端开发 JavaScript
带你读《现代Javascript高级教程》二十七、实现符合Promise/A+规范的Promise(3)
带你读《现代Javascript高级教程》二十七、实现符合Promise/A+规范的Promise(3)
|
存储 JavaScript 前端开发
web前端面试高频考点——Vue3.x升级的重要功能(emits属性、生命周期、多事件、Fragment、移出.async、异步组件写法、移出 filter、Teleport、Suspense...)
web前端面试高频考点——Vue3.x升级的重要功能(emits属性、生命周期、多事件、Fragment、移出.async、异步组件写法、移出 filter、Teleport、Suspense...)
253 0
|
前端开发
前端学习案例2-promise的理解方式和调用机制1
前端学习案例2-promise的理解方式和调用机制1
59 0
前端学习案例2-promise的理解方式和调用机制1
|
前端开发
前端学习案例17-promise的理解方式&调用机制4
前端学习案例17-promise的理解方式&调用机制4
67 0
前端学习案例17-promise的理解方式&调用机制4