前端进阶|第四天从setTimeout、Promise看js 的异步机制

简介: 前端进阶第四天 从setTimeout、Promise看js 的异步机制 每天一个前端知识点

要理解这几个函数的执行顺序,需要先明确js的执行机制。
Javascript是单线程语言,事件的调度机制是事件循环(event loop)

console.log(1); 
setTimeout(function () {
    console.log(2)
}, 0);
 console.log(3); 

执行结果是1,3,2
注意 setTimeout的事件间隔为0,应该立即执行的,但还是在3之后,为什么会这样呢?
这是因为他们处于不同的队列中。我们知道js请求是分为同步和异步两类,其中异步任务的调度又分为两类,分别是宏任务和微任务。

macro-task(宏任务): setTimeout,setImmediate,MessageChannel
micro-task(微任务): 原生Promise(有些实现的promise将then方法放到了宏任务中),MutationObserver

setTimeout(function(){
     console.log('定时器开始')
 });
 
 new Promise(function(resolve){
     console.log('马上执行for循环');
     for(var i = 0; i < 10000; i++){
         i == 99 && resolve();
     }
 }).then(function(){
     console.log('执行then函数')
 });
 
 console.log('代码执行结束');

执行结果
js0905.html:16 马上执行for循环
js0905.html:24 代码执行结束
js0905.html:21 执行then函数
js0905.html:12 定时器开始

js的执行调度机制,没有太看懂,决定分两天。

目录
相关文章
|
4天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
8天前
|
JavaScript 前端开发 API
Node.js在前端的妙用:打造更出色的Web体验
Node.js在前端的妙用:打造更出色的Web体验
28 5
|
3天前
|
JavaScript 前端开发 开发者
【Web 前端】什么是JS变量提升?
【5月更文挑战第1天】【Web 前端】什么是JS变量提升?
【Web 前端】什么是JS变量提升?
|
4天前
|
JavaScript 前端开发 开发者
【JavaScript技术专栏】JavaScript事件处理机制详解
【4月更文挑战第30天】本文探讨JavaScript中的事件处理机制,涉及事件类型(如click、mouseover)、事件流(冒泡型、捕获型及目标阶段)、事件处理函数(内联与addEventListener方法)以及事件委托(用于优化内存和处理动态元素)。此外,还介绍了事件取消,通过`preventDefault()`和`stopPropagation()`控制事件行为。理解这些概念对构建交互式Web应用至关重要。
|
4天前
|
开发框架 前端开发 Android开发
【Flutter 前端技术开发专栏】Flutter 与原生模块通信机制
【4月更文挑战第30天】本文探讨了Flutter作为跨平台开发框架与原生Android和iOS交互的必要性,主要通过方法调用和事件传递实现。文中详细介绍了Flutter与Android/iOS的通信方式,数据传输(包括基本和复杂类型),性能优化,错误处理以及实际应用案例。理解并掌握这一通信机制对开发高质量移动应用至关重要,未来有望随着技术发展得到进一步优化。
【Flutter 前端技术开发专栏】Flutter 与原生模块通信机制
|
4天前
|
JavaScript 前端开发
Node.js中的错误处理机制
【4月更文挑战第30天】本文介绍了Node.js的错误处理机制,包括Error对象、try-catch、错误事件监听及Promise和async/await的错误处理。错误通常封装在Error对象中,可自定义错误类型。try-catch用于捕获异常,但不适用于异步错误。事件监听器处理对象发出的&#39;error&#39;事件,防止应用崩溃。Promise的.catch()和async/await结合try-catch用于处理异步错误。良好的错误处理是保证应用健壮性和可靠性的关键。
|
5天前
|
消息中间件 存储 前端开发
理解JavaScript事件循环机制
理解JavaScript事件循环机制
|
5天前
|
JavaScript 前端开发 开发者
【Web 前端】JS模块化有哪些?
【4月更文挑战第22天】【Web 前端】JS模块化有哪些?
|
5天前
|
前端开发 JavaScript
【Web 前端】 js中call、apply、bind有什么区别?
【4月更文挑战第22天】【Web 前端】 js中call、apply、bind有什么区别?
【Web 前端】 js中call、apply、bind有什么区别?
|
5天前
|
前端开发 JavaScript 索引
【Web 前端】JS的几种具体异常类型(报错)
【4月更文挑战第22天】【Web 前端】JS的几种具体异常类型(报错)