如何顺序调用同一JavaScript函数 确保前次执行完成后再运行下一次

你遇到的问题本质是loadpaymentboxes为异步函数，同步批量调用时所有任务会同时进入事件循环，导致执行逻辑冲突。可以通过Promise + async/await 实现串行调用，确保前一次执行完成后再触发下一次调用，实现方案如下：

1. 首先整理所有调用参数为数组，方便后续循环遍历，后续要新增/修改调用参数只需调整该数组即可：

const callParams = [
  ['1t1', '1h1', p1t1, p1i1],
  ['1t2', '1h2', p1t2, p1i2],
  ['1t3', '1h3', p1t3, p1i3],
  ['2t1', '2h1', p2t1, p2i1],
  ['2t2', '2h2', p2t2, p2i2],
  ['2t3', '2h3', p2t3, p2i3],
  ['3t1', '3h1', p3t1, p3i1],
  ['3t2', '3h2', p3t2, p3i2],
  ['3t3', '3h3', p3t3, p3i3]
]

2. 若原函数loadpaymentboxes本身已返回Promise，直接编写异步循环执行即可：

async function serialExec() {
  // 遍历参数数组，等待前一次调用完成后再执行下一次
  for (const params of callParams) {
    await loadpaymentboxes(...params)
  }
}

// 启动串行调用
serialExec()

3. 若原函数没有返回Promise，需要先将其包装为Promise版本，匹配异步等待的逻辑：

// 包装原函数为返回Promise的版本，请根据实际业务逻辑调整完成触发条件
function wrapLoadPaymentBoxes(...args) {
  return new Promise((resolve) => {
    loadpaymentboxes(...args)
    // 此处替换为你的实际完成判断逻辑：
    // 例如原函数支持完成回调，就把resolve作为回调参数传入
    // 若为DOM加载完成，则监听对应元素的load事件触发resolve
    // 示例：假设每次调用固定需要100ms完成，仅作临时测试用
    setTimeout(resolve, 100)
  })
}

// 调整串行执行逻辑为调用包装后的函数
async function serialExec() {
  for (const params of callParams) {
    await wrapLoadPaymentBoxes(...params)
  }
}

serialExec()

如果需要兼容不支持async/await的旧环境，可以用Promise链式调用的方式实现：

callParams.reduce((prevPromise, params) => {
  return prevPromise.then(() => loadpaymentboxes(...params))
}, Promise.resolve())

内容的提问来源于stack exchange，提问作者CJ Broersma