setTimeout设置为0和nexttick 谁先执行谁后执行

2024-09-07 02:12

本文主要是介绍setTimeout设置为0和nexttick 谁先执行谁后执行,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在 Vue 中,setTimeout 设置为 0 和 Vue.nextTick 的执行顺序是不同的,它们基于 JavaScript 事件循环和微任务、宏任务的执行顺序来决定。

JavaScript 事件循环的基本执行顺序:

同步任务:先执行所有同步代码。
微任务(如 Promise.then、MutationObserver、process.nextTick):在同步任务执行完后,立即执行所有微任务。
宏任务(如 setTimeout、setInterval):当所有微任务执行完后,才会开始执行宏任务。

执行顺序分析:
Vue.nextTick:在 Vue 中,它属于微任务。它会在 DOM 更新完成并且同步代码执行完毕之后立即执行,紧跟在当前的同步任务之后。

setTimeout(…, 0):尽管 setTimeout 的延迟时间是 0,它仍然是一个宏任务。它会被放入宏任务队列中,必须等到所有微任务完成后才会执行。

谁先执行?
Vue.nextTick 先执行,因为它是一个微任务,会在当前的同步代码执行完后立即执行。
setTimeout(…, 0) 后执行,因为它是一个宏任务,必须等待所有微任务执行完毕后才执行。
代码示例:

console.log('start');
Vue.nextTick(() => {console.log('nextTick callback');
});
setTimeout(() => {console.log('setTimeout callback');
}, 0);
console.log('end');

输出顺序:

start
end
nextTick callback
setTimeout callback

解释:
start 和 end 是同步任务,立即执行。
Vue.nextTick 是微任务,在同步任务执行完后立即执行,所以输出 nextTick callback。
setTimeout(…, 0) 是宏任务,会在微任务执行完后才执行,所以最后输出 setTimeout callback。
结论:
Vue.nextTick 总是先于 setTimeout(…, 0) 执行。

这篇关于setTimeout设置为0和nexttick 谁先执行谁后执行的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1143765

相关文章

python设置环境变量路径实现过程

《python设置环境变量路径实现过程》本文介绍设置Python路径的多种方法:临时设置(Windows用`set`,Linux/macOS用`export`)、永久设置(系统属性或shell配置文件... 目录设置python路径的方法临时设置环境变量(适用于当前会话)永久设置环境变量(Windows系统

解密SQL查询语句执行的过程

《解密SQL查询语句执行的过程》文章讲解了SQL语句的执行流程,涵盖解析、优化、执行三个核心阶段,并介绍执行计划查看方法EXPLAIN,同时提出性能优化技巧如合理使用索引、避免SELECT*、JOIN... 目录1. SQL语句的基本结构2. SQL语句的执行过程3. SQL语句的执行计划4. 常见的性能优

Spring Bean初始化及@PostConstruc执行顺序示例详解

《SpringBean初始化及@PostConstruc执行顺序示例详解》本文给大家介绍SpringBean初始化及@PostConstruc执行顺序,本文通过实例代码给大家介绍的非常详细,对大家的... 目录1. Bean初始化执行顺序2. 成员变量初始化顺序2.1 普通Java类(非Spring环境)(

Spring Boot 中的默认异常处理机制及执行流程

《SpringBoot中的默认异常处理机制及执行流程》SpringBoot内置BasicErrorController,自动处理异常并生成HTML/JSON响应,支持自定义错误路径、配置及扩展,如... 目录Spring Boot 异常处理机制详解默认错误页面功能自动异常转换机制错误属性配置选项默认错误处理

如何在Java Spring实现异步执行(详细篇)

《如何在JavaSpring实现异步执行(详细篇)》Spring框架通过@Async、Executor等实现异步执行,提升系统性能与响应速度,支持自定义线程池管理并发,本文给大家介绍如何在Sprin... 目录前言1. 使用 @Async 实现异步执行1.1 启用异步执行支持1.2 创建异步方法1.3 调用

Go语言编译环境设置教程

《Go语言编译环境设置教程》Go语言支持高并发(goroutine)、自动垃圾回收,编译为跨平台二进制文件,云原生兼容且社区活跃,开发便捷,内置测试与vet工具辅助检测错误,依赖模块化管理,提升开发效... 目录Go语言优势下载 Go  配置编译环境配置 GOPROXYIDE 设置(VS Code)一些基本

小白也能轻松上手! 路由器设置优化指南

《小白也能轻松上手!路由器设置优化指南》在日常生活中,我们常常会遇到WiFi网速慢的问题,这主要受到三个方面的影响,首要原因是WiFi产品的配置优化不合理,其次是硬件性能的不足,以及宽带线路本身的质... 在数字化时代,网络已成为生活必需品,追剧、游戏、办公、学习都离不开稳定高速的网络。但很多人面对新路由器

Spring Boot Maven 插件如何构建可执行 JAR 的核心配置

《SpringBootMaven插件如何构建可执行JAR的核心配置》SpringBoot核心Maven插件,用于生成可执行JAR/WAR,内置服务器简化部署,支持热部署、多环境配置及依赖管理... 目录前言一、插件的核心功能与目标1.1 插件的定位1.2 插件的 Goals(目标)1.3 插件定位1.4 核

mybatis执行insert返回id实现详解

《mybatis执行insert返回id实现详解》MyBatis插入操作默认返回受影响行数,需通过useGeneratedKeys+keyProperty或selectKey获取主键ID,确保主键为自... 目录 两种方式获取自增 ID:1. ​​useGeneratedKeys+keyProperty(推

linux hostname设置全过程

《linuxhostname设置全过程》:本文主要介绍linuxhostname设置全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录查询hostname设置步骤其它相关点hostid/etc/hostsEDChina编程A工具license破解注意事项总结以RHE