本文旨在解决 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() 方法，我们可以避免函数在推入数组时立即执行，从而更好地控制异步任务的执行时机。这种方法在处理大量异步任务时非常有用，可以提高代码的可维护性和可读性。 记住，理解函数引用和函数调用的区别是掌握这一技巧的关键。
以上就是JavaScript 中避免函数推入数组时立即执行的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1524208.html
微信扫一扫 
支付宝扫一扫 
