当前位置: 首页 > article >正文

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) 执行。


http://www.kler.cn/a/293677.html

相关文章:

  • 【OH】openHarmony开发环境搭建(基于windows子系统WSL)
  • NAT网络工作原理和NAT类型
  • 【OceanBase 诊断调优】—— ocp上针对OB租户CPU消耗计算逻辑
  • 浅谈C#之内存管理
  • K8s进阶使用
  • C++初阶——list
  • OXC:光交叉连接(optical cross-connect)-介绍
  • 计算机网络-VRRP基础概念
  • 第十七题:电话号码的字母组合
  • 上海市计算机学会竞赛平台2024年8月月赛丙组等差数列的素性
  • 数字图像处理基础:图像处理概念、步骤、方式介绍
  • 【区块链 + 人才服务】FISCO BCOS 高校实训和管理平台 | FISCO BCOS应用案例
  • 【Linux】自定义协议与序列化和反序列化
  • 热力图科普:数据可视化的利器
  • 68-java字符流和字节流
  • 【一嗨租车-注册安全分析报告-滑动验证加载不正常导致安全隐患】
  • DWG如何转换成PDF?总结了四种转换
  • excel比较两列差异性和一致性,统计之后降序排列
  • SQL 数据查询
  • flask-login 生成 cookie,session
  • 从基础到前沿:基于Python的自然语言处理系列介绍
  • 正点原子阿尔法开发板linux驱动开发遇到cc1: error: code model kernel does not support PIC mode
  • KEIL中编译51程序 算法计算异常的疑问
  • mysql用时间戳还是时间存储比较好
  • 一文详解go底层原理之垃圾回收
  • Vue 中的 Vuex:全面解析与使用教程