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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

NULLISNULL 2019-09-05 23:27:16 浏览301
展开阅读全文

要理解这几个函数的执行顺序,需要先明确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的执行调度机制,没有太看懂,决定分两天。

网友评论

登录后评论
0/500
评论
NULLISNULL
+ 关注