宣传型网站,搭建本地wordpress,建筑设计图片,企业网站建设内容报价宏任务和微任务 JS为微任务和宏任务简单介绍任务执行顺序例子任务执行顺序简单例子 关于new Promise实例化过程的例子 JS为微任务和宏任务简单介绍
js是单线程的#xff0c;但是分同步异步微任务和宏任务皆为异步任务#xff0c;它们都属于一个队列宏任务一般是#xff1a;… 宏任务和微任务 JS为微任务和宏任务简单介绍任务执行顺序例子任务执行顺序简单例子 关于new Promise实例化过程的例子 JS为微任务和宏任务简单介绍
js是单线程的但是分同步异步微任务和宏任务皆为异步任务它们都属于一个队列宏任务一般是script、setTimeout、setInterval、postMessage微任务Promise.then ES6先执行同步再执行异步异步遇到微任务先执行微任务执行完后如果没有微任务就执行下一个宏任务如果有微任务就按顺序一个一个执行微任务
任务执行顺序 同步任务 —— 异步任务中微任务 —— 异步任务中宏任务
任务执行顺序例子
function doFoo(fn) {this.code 404;fn();
}function f() {setTimeout(() {console.log( this); // [object window]语句3this.code 401; // 语句4}, 0)console.log( this.code ); // 404语句2
}let obj {code: 200,foo: f
};var code 500;doFoo( obj.foo ); // 语句1
setTimeout((){console.log(obj.code)}, 0); // 200语句5
setTimeout((){console.log(window.code)}, 0); // 401语句6分析
按照先同步再异步的顺序从上往下编译执行第一个执行doF( obj.foo )任务,将obj.foo作为参数传入到函数doFoo当中此时作为调用者的对象还是windowdoFoo函数中this.code 404;将window对象下的code值修改为404之后doFoo函数继续调用 f() 函数f()函数中的setTimeout()是宏任务先放入宏任务列表里不执行反而直接执行后面的 console.log( this.code ); 此时调用该函数的对象还是window所以打印出404继续接下来的任务将两个setTimeout()都放入宏任务列表执行第一个放入的setTimeout()任务执行其中this.code401,将window对象下的code的值又修改为401执行第二个放入的setTimeout()任务执行console.log(obj.code)整个过程中obj对象的code一直没被修改所以还是200执行第三个放入的setTimeout()任务执行console.log(window.code),打印出401
任务执行顺序简单例子
console.log(1)
setTimeout(function() {console.log(2)
}, 0)
const p new Promise((resolve, reject) {resolve(4)
})
p.then(data {console.log(data)
})
console.log(3)
//1342分析
先同步再异步从上往下编译执行首先遇到同步任务console.log(1);输出1接着遇到setTimeout 异步宏任务放入宏任务队列中接着遇到 Promisenew Promise在实例化的过程中所执行的代码都是同步进行的但由于new Promise没有输出事件所以无事发生。接着遇到.thenthen是异步微任务,不执行加入到异步微任务列表遇到同步任务console.log(3);输出3主线程中同步任务执行完从微任务队列中取出任务到主线程中先取出作为微任务的.thenp.then 输出4,微任务执行完毕微任务队列为空开始执行宏任务setTimeout 输出2,宏任务队列为空
重点注意new Promise在实例化的过程中所执行的代码都是同步进行的
关于new Promise实例化过程的例子
console.log(1)
setTimeout(function() {console.log(2)new Promise(function(resolve) {console.log(3)resolve()}).then(function() {console.log(4)})
})new Promise(function(resolve) {console.log(5)resolve()
}).then(function() {console.log(6)
})setTimeout(function() {console.log(7)new Promise(function(resolve) {console.log(8)resolve()}).then(function() {console.log(9)})
})
console.log(10)
//15106234789
分析
先同步再异步从上往下编译执行首先遇到同步任务console.log(1);输出1遇到setTimeout 异步宏任务放入宏任务队列中遇到 Promisenew Promise在实例化的过程中所执行的代码都是同步进行的所以输出5所以接着遇到.then.then异步微任务,被分发到微任务Event Queue中遇到setTimeout异步宏任务;放入宏任务队列中遇到同步任务console.log(10);输出10,主线程中同步任务全部执行完;同步任务全部执行完从微任务队列中取出任务到主线程中输出6在从宏任务队列中取出任务到主线程中执行第一个setTimeout输出234在宏任务中执行同步,同步异步微任务;在执行第二个setTimeout输出789和8同理
