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等等。

相关文章
|
前端开发 JavaScript
JS中Promise详解
JS中Promise详解
314 0
|
4月前
|
编解码 数据处理 API
如何用阿里云OSS对图片和视频进行数据处理?
本文介绍了如何利用阿里云对象存储OSS进行图片和视频处理。OSS提供了丰富的功能,如图片的缩放、裁剪、旋转和水印添加等,用户只需在图片URL后附加处理参数即可实现自动化处理。同时,OSS还支持自定义样式模板,便于批量操作。对于视频处理,OSS支持转码、截图、拼接等功能,满足多终端播放需求。通过OSS的API和SDK,开发者可以方便地集成这些功能,提升数据管理效率。
|
7月前
|
存储 人工智能 测试技术
HarmonyOS Next~HarmonyOS应用测试全流程解析:从一级类目上架到二级类目专项测试
本文深入解析HarmonyOS应用测试全流程,涵盖从一级类目通用测试到二级类目专项测试的技术方案。针对兼容性、性能、安全测试及分布式能力验证等关键环节,提供详细实践指导与代码示例。同时,结合典型案例分析常见问题及优化策略,帮助开发者满足华为严苛的质量标准,顺利上架应用。文章强调测试在开发中的核心地位,助力打造高品质HarmonyOS应用。
393 2
|
移动开发
uni-app使用v-html输出富文本图片溢出解决
uni-app使用v-html输出富文本图片溢出解决
1284 1
|
监控 安全 C#
使用C#如何监控选定文件夹中文件的变动情况?
使用C#如何监控选定文件夹中文件的变动情况?
329 19
|
JSON 小程序 JavaScript
微信小程序页面传参(多条数据的传递)
本文介绍了微信小程序中页面间参数传递的方法。1) 单个数据传递:通过`wx.navigateTo`将ID拼接在URL中传递,接收页面在`onLoad`中获取。2) 多个参数传递:将数据转换为JSON字符串,然后通过URL参数传递,接收页面同样在`onLoad`中解析JSON恢复数据。3) 提到了JSON作为数据交换格式的基础知识。全文鼓励读者尝试并点赞。
1007 1
|
JavaScript
数据结构(用 JS 实现栈和队列【三种方式】)
数据结构(用 JS 实现栈和队列【三种方式】)
237 0
|
机器学习/深度学习 人工智能 数据可视化
Jupyter Notebook的10个常用扩展介绍
Jupyter Notebook(前身为IPython Notebook)是一种开源的交互式计算和数据可视化的工具,广泛用于数据科学、机器学习、科学研究和教育等领域。它提供了一个基于Web的界面,允许用户创建和共享文档,这些文档包含实时代码、方程、可视化和文本。
437 6
|
前端开发 JavaScript 编译器
深入解析JavaScript中的异步编程:Promises与async/await的使用与原理
【4月更文挑战第22天】本文深入解析JavaScript异步编程,重点讨论Promises和async/await。Promises用于管理异步操作,有pending、fulfilled和rejected三种状态。通过.then()和.catch()处理结果,但可能导致回调地狱。async/await是ES2017的语法糖,使异步编程更直观,类似同步代码,通过事件循环和微任务队列实现。两者各有优势,适用于不同场景,能有效提升代码可读性和维护性。
|
弹性计算
使用阿里云服务器自己搭建Minecraft服务器配置推荐来了
使用阿里云服务器自己搭建Minecraft服务器,Minecraft不用租自己搭建,阿里云百科建议CPU处理器2核起步,一般10个玩家以内直接选择2核4G配置,大型整合包1.12版本,这个配置差不多都够用的,如果是1.16以上加机械动力,不超过10个轻量mod建议选择4核8G配置或2核8G配置
5947 0
使用阿里云服务器自己搭建Minecraft服务器配置推荐来了