JavaScript中如何避免推入数组的函数立即执行？

问题根源 #

你当前的代码中，直接调用changePrice(...)并将返回的Promise对象推入数组，这会导致changePrice在推入数组的瞬间就被执行，而非等到Promise.all()触发时才运行。

解决方案 #

要推迟函数执行，需将changePrice调用包装成无参数的箭头函数推入数组。这样数组中存储的是未执行的函数引用，只有当Promise.all()处理时，才会调用这些函数并触发changePrice的执行。

修改后的代码示例 #

首先调整数组推入逻辑：

prices.map(price => {
  const minPrice = minPrices.find(_price => _price.TYPE === price.TYPE)
  if (minPrice) {
    // 用箭头函数包装，推迟changePrice执行
    parentChanges.push(() => changePrice(mainProduct.ID, minPrice.PRICE, minPrice.TYPE))
  }
  // 同样包装子项的changePrice调用
  childChanges.push(() => changePrice(id, price.PRICE, price.TYPE))
})

然后在Promise.all()中调用这些函数以获取Promise数组：

// 执行数组中所有函数，生成Promise集合后等待完成
await Promise.all(childChanges.map(fn => fn()))
await Promise.all(parentChanges.map(fn => fn()))

原理说明 #

• 推入数组的是未执行的箭头函数，不会立即触发changePrice的调用。
• 当调用fn()时，才会执行changePrice并返回Promise，此时Promise.all()可以正确等待所有异步操作完成。

可选优化方案 #

如果你偏好更简洁的写法，也可以用Function.prototype.bind绑定参数，效果和箭头函数一致：

// 用bind绑定参数，生成可延迟执行的函数
parentChanges.push(changePrice.bind(null, mainProduct.ID, minPrice.PRICE, minPrice.TYPE))
// 同样在Promise.all阶段调用函数
await Promise.all(parentChanges.map(fn => fn()))

内容的提问来源于stack exchange，提问作者Melika Shojaee