javascript 事件循环

JavaScript的运行顺序就是完全单线程的异步模型:同步在前,异步在后。所有的异步任务都要等待当前的同步任务执行完毕之后才能执行。

在JavaScript中,任务可以分为宏任务和微任务两种类型。宏任务是指需要在任务队列中排队执行的任务,而微任务是指在当前任务执行结束后立即执行的任务。

常见的宏任务包括:

script(整体代码)、setTimeout、setInterval、setImmediate(Node.js独有)、I/O操作、UI渲染等。

常见的微任务包括:

Promise.then()、MutationObserver、process.nextTick(Node.js独有)等。

当一个宏任务执行完成后,会检查是否有微任务需要执行,如果有就将所有微任务全部执行完毕,然后再执行下一个宏任务。因此,微任务的执行优先级要高于宏任务。

  1. JavaScript是单线程
  2. 执行内容分为普通代码(如 var a = 1),任务:宏任务(如setTimeout())和微任务(如Promise.then())
  3. 执行过程涉及栈(FILO)和队列结构(FIFO)
  4. JavaScript代码整体当作宏任务
  5. 解析代码时,普通代码先执行,遇到任务加入队列
  6. 代码执行时,按顺序:普通代码执行完成> 执行微任务队列全部微任务> 执行一个宏任务> 检查微任务是否执行完成,未完成,执行所有微任务> 执行一个宏任务> 检查微任务是否执行完成,未完成,执行所有微任务>...

举例1:

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

输出:
script start
script end
promise1
promise2
setTimeout

举例2:

Promise.resolve().then(function(){
  console.log('resolve1')
  setTimeout(function(){
    console.log('setTimeout1')
  },0)
})
setTimeout(function(){
  console.log('setTimeout2')
  Promise.resolve().then(function(){
    console.log('resolve2')
  })
},)

输出:
resolve1
setTimeout2
resolve2
setTimeout1

 

posted @ 2022-12-28 11:50  原子切割员  阅读(18)  评论(0编辑  收藏  举报