JavaScript 中避免函数推入数组时立即执行-js教程-PHP中文网

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

碧海醫心

发布： 2025-09-28 16:59:25

原创

720人浏览过

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

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

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

问题分析

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

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

解决方案：使用函数引用

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

即构数智人

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

查看详情

示例代码

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

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

注意事项