本文旨在解决 JavaScript 中函数推入数组时立即执行的问题。通过将函数引用而非函数调用推入数组，并结合 Promise.all() 方法，可以实现函数的延迟执行，从而更好地控制异步任务的执行时机。本文将提供详细的示例代码和解释，帮助读者理解和应用这一技巧。
在 JavaScript 中，当我们将函数推入数组时，如果直接调用函数，它会立即执行。这在需要延迟执行函数，例如在使用 Promise.all() 并行执行多个异步任务时，会造成问题。解决的关键在于将函数引用（function reference）而非函数调用（function call）推入数组。
问题分析
考虑以下场景：我们希望并行执行多个 changePrice 函数，并将它们的结果传递给 Promise.all()。如果直接在 push 方法中调用 changePrice 函数，它会立即执行，而不是等待 Promise.all() 调用。
立即学习“Java免费学习笔记（深入）”；
解决方案：使用函数引用
为了避免立即执行，我们需要将函数引用推入数组，而不是函数调用。这可以通过使用箭头函数或匿名函数来实现。
示例代码
以下代码展示了如何使用函数引用来避免函数立即执行：
async function changePrice(id, price, type) {
// 模拟异步操作
return new Promise(resolve => {
setTimeout(() => {
console.log(`Changing price for id: ${id}, price: ${price}, type: ${type}`);
resolve(`Price changed for id: ${id}`);
}, 500);
});
}
async function processPrices(prices, minPrices, mainProduct) {
let childChanges = [];
let parentChanges = [];
prices.map(price => {
const minPrice = minPrices.find(_price => _price.TYPE === price.TYPE);
if (minPrice) {
// 推入函数引用，而不是函数调用
parentChanges.push(() => changePrice(mainProduct.ID, minPrice.PRICE, minPrice.TYPE));
}
// 推入函数引用，而不是函数调用
childChanges.push(() => changePrice(price.ID, price.PRICE, price.TYPE));
});
// 使用 Promise.all 执行异步任务
const childResults = await Promise.all(childChanges.map(task => task()));
const parentResults = await Promise.all(parentChanges.map(task => task()));
console.log('Child results:', childResults);
console.log('Parent results:', parentResults);
}
// 模拟数据
const prices = [
{ ID: 1, PRICE: 10, TYPE: 'A' },
{ ID: 2, PRICE: 20, TYPE: 'B' }
];
const minPrices = [
{ TYPE: 'A', PRICE: 5 },
{ TYPE: 'B', PRICE: 15 }
];
const mainProduct = { ID: 100 };
// 调用主函数
processPrices(prices, minPrices, mainProduct);代码解释
- changePrice 函数: 模拟一个异步操作，返回一个 Promise，并在一段时间后 resolve。
- processPrices 函数: 遍历 prices 数组，并将函数引用推入 childChanges 和 parentChanges 数组。关键在于使用箭头函数 () => changePrice(...) 来创建函数引用。
- Promise.all 执行: 使用 Promise.all 并结合 map(task => task()) 来执行数组中的函数。task() 调用函数引用，从而执行实际的 changePrice 函数。
注意事项
- 确保推入数组的是函数引用，而不是函数调用。函数调用会立即执行函数，而函数引用则会将函数作为值存储在数组中，等待后续执行。
- 在使用 Promise.all 执行函数引用时，需要使用 map(task => task()) 来调用数组中的每个函数。
- changePrice 函数需要返回一个 Promise，以便 Promise.all 可以正确地处理异步任务。
总结
通过将函数引用推入数组，并结合 Promise.all() 方法，我们可以避免函数在推入数组时立即执行，从而更好地控制异步任务的执行时机。这种方法在处理大量异步任务时非常有用，可以提高代码的可维护性和可读性。 记住，理解函数引用和函数调用的区别是掌握这一技巧的关键。
