前端进阶|第四天从setTimeout、Promise看js 的异步机制-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

前端进阶|第四天从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的执行调度机制,没有太看懂,决定分两天。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章