0
点赞
收藏
分享

微信扫一扫

JavaScript 执行机制(宏任务和微任务)

1.

setTimeout(function() {
console.log('1')
});

new Promise(function(resolve) {
console.log('2');
resolve();
}).then(function() {
console.log('3')
});

console.log('4');

输出结果:2,4,3,1

2.

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('代码执行结束');

输出结果:

JavaScript 执行机制(宏任务和微任务)_for循环

3.

$.ajax({
type: "get",
dataType:'jsonp',
url:'https://ipinfo.io',
success:() => {
console.log('发送成功!');
}
})
console.log('代码执行结束');

输出结果:

JavaScript 执行机制(宏任务和微任务)_for循环_02

4.

function sleep(delay) {
var start = (new Date()).getTime();
while ((new Date()).getTime() - start < delay) {
continue;
}
}
console.log(new Date)
setTimeout(() => {
console.log('延时并不是三秒3秒, 而是5秒')
console.log(new Date)
},3000)
sleep(5000)

输出结果:

JavaScript 执行机制(宏任务和微任务)_异步任务_03

除了广义的同步任务和异步任务,我们对任务有更精细的定义:

  • macro-task(宏任务):包括整体代码script,setTimeout,setInterval
  • micro-task(微任务):Promise,process.nextTick

 JavaScript 执行机制(宏任务和微任务)_异步任务_04

5.

console.log('1');

setTimeout(function() {
console.log('2');
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
console.log('8')
})

setTimeout(function() {
console.log('9');
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('12')
})
})

输出结果:

JavaScript 执行机制(宏任务和微任务)_for循环_05

 

 

 

 

 

 


举报

相关推荐

0 条评论