<JS篇> 异步函数执行顺序问题
发布网友
发布时间：2024-09-17 03:38
共1个回答
热心网友
时间：2024-09-30 03:01
在JavaScript面试中，理解异步函数执行顺序是一个常见的话题。让我们通过一道题目来探讨：当你看到连续打印出5个6时，可能对新手来说是个谜，但对于熟悉者，解决方法通常是使用闭包或ES6的局部变量。然而，深入理解背后的原因至关重要。
问题的关键在于JavaScript的单线程性质和任务队列机制。JavaScript有两个任务队列：宏任务队列和微任务队列。当我们遇到异步操作，如setTimeout或Promise，任务会被放入相应队列等待执行。过程是这样的：主线程执行完当前代码后，会先执行宏任务，然后是微任务，直到队列为空。
在给出的示例中，for循环是第一个宏任务，它执行5次，每次循环结束后，将待执行的函数加入宏队列。首次执行时，由于没有微任务，直接进入下一个宏任务，打印出i（此时i为6）。每过一秒钟，setTimeout中的console.log(i)执行，由于作用域查找规则，始终找到的是全局i，因此每次输出6。
解决这个问题的策略是使用闭包保存每次循环的i值，避免全局查找。通过这种方式，每个宏任务都有自己的i，不再需要查找全局变量。
接下来，尝试解答一个练习题：当执行start，然后依次为1,2,3,4,5，xhr，promise1，catch1，async，以及后续的setImmediate，timeout等任务时，控制台输出的顺序会有所不同。async函数的特性影响了微任务的执行顺序。
掌握异步函数执行顺序不仅有助于解决面试题，也是理解JavaScript事件循环的基础。通过实践和深入理解，你将更好地掌握这一关键知识点。
热心网友
时间：2024-09-30 03:02
在JavaScript面试中，理解异步函数执行顺序是一个常见的话题。让我们通过一道题目来探讨：当你看到连续打印出5个6时，可能对新手来说是个谜，但对于熟悉者，解决方法通常是使用闭包或ES6的局部变量。然而，深入理解背后的原因至关重要。
问题的关键在于JavaScript的单线程性质和任务队列机制。JavaScript有两个任务队列：宏任务队列和微任务队列。当我们遇到异步操作，如setTimeout或Promise，任务会被放入相应队列等待执行。过程是这样的：主线程执行完当前代码后，会先执行宏任务，然后是微任务，直到队列为空。
在给出的示例中，for循环是第一个宏任务，它执行5次，每次循环结束后，将待执行的函数加入宏队列。首次执行时，由于没有微任务，直接进入下一个宏任务，打印出i（此时i为6）。每过一秒钟，setTimeout中的console.log(i)执行，由于作用域查找规则，始终找到的是全局i，因此每次输出6。
解决这个问题的策略是使用闭包保存每次循环的i值，避免全局查找。通过这种方式，每个宏任务都有自己的i，不再需要查找全局变量。
接下来，尝试解答一个练习题：当执行start，然后依次为1,2,3,4,5，xhr，promise1，catch1，async，以及后续的setImmediate，timeout等任务时，控制台输出的顺序会有所不同。async函数的特性影响了微任务的执行顺序。
掌握异步函数执行顺序不仅有助于解决面试题，也是理解JavaScript事件循环的基础。通过实践和深入理解，你将更好地掌握这一关键知识点。
