在JavaScript编程中，我们经常需要执行一些异步操作。 forEach()方法是一个方便的构造函数，可以帮助你遍历数组并执行回调函数以更新数组中的元素。但是，当你在回调函数中执行异步操作时，forEach()可能会出现一些问题。
在这篇文章中，我们将讨论如何使用回调函数来同步执行forEach()循环中的异步操作。
forEach()方法
forEach()方法是JavaScript中的一种迭代方法，它允许你遍历数组并对它的每个元素执行一个回调函数。 这个回调函数接收3个参数：当前元素、当前索引和整个数组。
下面是一个简单的例子：
const array1 = ['a', 'b', 'c']; array1.forEach(element => console.log(element)); // Output: // a // b // c
异步问题
当你在forEach()回调函数中执行异步操作时，forEach()循环将不会等待这个异步操作完成，而是会继续执行循环的下一次迭代。这意味着，如果你的回调函数有副作用，那么结果可能会出乎意料。
考虑以下代码：
-- -------------------- ---- -------
----- ------ - --- -- ---
---------------------- -- -
------------- -- -
---------------------
-- ------
---
--------------------输出结果将是：
done 1 2 3
这是由于forEach()循环不等待setTimeout()函数的执行，而是立即进入下一个迭代，并在异步操作完成之前继续执行代码。
使用回调函数同步forEach()循环
为了解决上述问题，我们可以使用回调函数来同步执行forEach()循环中的异步操作。 回调函数包含一个参数，它是一个函数，当异步操作完成时，应该调用它。 这个参数通常称为“回调”或“完成函数”。
以下是一个演示如何使用回调函数同步执行forEach()循环中的异步操作的示例代码：
-- -------------------- ---- -------
----- ------ - --- -- ---
-------- ------------------ --------- -
--- - - --
----- ---- - -- -- -
-- -- - ------------- -
----- ------- - ---------
----
----------------- ------
-
--
-------
-
-------- ---------------------- --------- -
------------- -- -
---------------------
-----------
-- ------
-
------------------- ---------------
--------------------输出结果将是：
1 2 3 done
注意，这里我们定义了一个名为forEachSync()的自定义函数，它接受一个数组和一个回调函数作为参数。 在forEachSync()内部，我们使用一个名为next()的递归函数来遍历数组并执行回调函数。 当回调函数完成异步操作时，它应该调用next()函数以继续forEach()循环的下一个迭代。
在上面的示例中，我们定义了一个名为asyncFunction()的回调函数。 这个函数接收一个元素和一个回调参数作为输入，并使用setTimeout()模拟异步操作。 当异步操作完成时，asyncFunction()将调用回调函数以便执行下一次迭代。
最终结果是，异步操作按顺序进行，直到所有异步操作完成，然后输出“done”。
结论
JavaScript中的forEach()方法是一个方便的数组迭代器。 但是，当你需要在回调函数中执行异步操作时，forEach()可能会出现问题。 为了解决这个问题，我们可以使用回调函数来同步执行forEach()循环中的异步操作。
以上就是如何同步执行forEach()循环中异步操作
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30589