JavaScript 同步与异步任务问题详解

前言

在 JavaScript 中，我们通常将任务分为同步任务和异步任务。同步任务会在主线程上按照一定的顺序依次执行，而异步任务则会被安排进任务队列中，等待主线程的任务执行完毕后再执行。

本文将详细讲解 JavaScript 中的同步任务和异步任务，以及不同类型异步任务的执行顺序和原理。

同步任务

同步任务指的是按顺序在主线程上排队执行的任务，只有前一个任务执行完成，才会执行下一个任务。

示例代码：

console.log('1');
console.log('2');
console.log('3');

以上代码中，代码以从上到下的顺序执行，所以输出结果如下：

1
2
3

异步任务

异步任务指的是不进入主线程，而进入任务队列的任务，在主线程执行完同步任务后，再回到任务队列中查找是否有对应的异步任务，然后在主线程中执行。

异步任务有多种类型， 分别是：

• 宏任务（MacroTask）
• 微任务（MicroTask）

宏任务

宏任务在事件循环 Event Loop 的不同阶段执行，主要有以下几个宏任务：

• script（整体代码）
• setTimeout
• setInterval
• setImmediate
• I/O
• UI rendering

示例代码：

console.log('1');

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

console.log('3');

以上代码中，setTimeout 作为一个宏任务，会进入任务队列等待执行，所以输出结果如下：

1
3
2

微任务

微任务指的是在当前宏任务执行完成后立即执行的任务，也就是说，如果当前宏任务中没有微任务，就会去检查微任务队列中是否有微任务等待执行。

常见的微任务有以下几种：

• Promise.then
• MutationObserver
• Object.observe (已废弃)
• process.nextTick (NodeJS 环境)

示例代码：

console.log('1');

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

console.log('3');

以上代码中，Promise.resolve().then 函数作为一个微任务，会在宏任务执行完成后，立即在主线程执行，所以输出结果如下：

1
3
2

总结

JavaScript 中的同步任务和异步任务分别执行于主线程和任务队列中，宏任务与微任务的执行顺序同时也呈现出一定的复杂性和变化。掌握它们的原理，对于提高代码的性能和处理程序中的异步逻辑，都是非常重要的。

在真实的编码工作中，大家会遇到各种业务场景和需求，可能需要手动将同步任务和异步任务按顺序加入任务队列、合理地使用 setInterVal 定时器等等，希望通过本文的讲解，大家对 JavaScript 中的同步和异步任务有一个比较全面的认识，也能对实际代码实现和开发中的问题有一个更加深刻的理解。