JavaScript 中避免函数推入数组时立即执行

2025-9-28 11:09

|

16

|

web前端

982 字

|

4 分钟

JavaScript 中避免函数推入数组时立即执行

本文旨在解决 JavaScript 中函数推入数组时立即执行的问题。通过将函数引用而非函数调用推入数组，并结合 Promise.all() 方法，可以实现函数的延迟执行，从而更好地控制异步任务的执行时机。本文将提供详细的示例代码和解释，帮助读者理解和应用这一技巧。

在 JavaScript 中，当我们将函数推入数组时，如果直接调用函数，它会立即执行。这在需要延迟执行函数，例如在使用 Promise.all() 并行执行多个异步任务时，会造成问题。解决的关键在于将函数引用（function reference）而非函数调用（function call）推入数组。

问题分析

考虑以下场景：我们希望并行执行多个 changePrice 函数，并将它们的结果传递给 Promise.all()。如果直接在 push 方法中调用 changePrice 函数，它会立即执行，而不是等待 Promise.all() 调用。

立即学习“Java免费学习笔记（深入）”；

解决方案：使用函数引用

为了避免立即执行，我们需要将函数引用推入数组，而不是函数调用。这可以通过使用箭头函数或匿名函数来实现。

示例代码

即构数智人

即构数智人是由即构科技推出的ai虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

36

查看详情

以下代码展示了如何使用函数引用来避免函数立即执行：

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 函数。

注意事项