循环内异步处理数组对象并添加1秒调用间隔的实现方案（解决仅最后一个元素生效问题）

这个问题我太熟悉了——forEach和异步函数搭配的时候很容易踩这个坑！核心问题在于**forEach根本不会等待异步操作完成**，它会一口气把所有元素遍历完，每个async回调几乎同时启动，导致所有MontagemFiltro并行执行，再加上你后面依赖的函数需要时间，前面的请求还没处理完就被后面的覆盖或者打断，自然只有最后一个能正常工作。

最推荐的方案：用for...of循环实现串行处理 #

for...of是ES6引入的循环方式，它天然支持等待异步操作完成后再进入下一次循环，语义清晰，代码也最容易维护：

async function ChamandoEtiquetas() { 
  // 合并条件判断，让代码更简洁
  if (id && NumerosEtiquetas) { 
    // 遍历数组，逐个处理元素
    for (const Etiqueta of NumerosEtiquetas) {
      // 等待当前元素处理完成
      await MontagemFiltro(Etiqueta);
      // 处理完后停顿1秒，再进入下一次循环
      await new Promise(resolve => setTimeout(resolve, 1000));
    } 
  } 
} 

关键补充：确保setFiltro是真正的异步函数 #

另外要注意，如果你的setFiltro是基于回调的老式异步函数（不是返回Promise的），那await不会生效，你需要先把它包装成Promise：

// 把回调式的setFiltro包装成Promise版本
function setFiltroPromise(CodigoDeBarras) {
  return new Promise((resolve, reject) => {
    setFiltro(CodigoDeBarras, (error) => {
      if (error) {
        reject(error);
      } else {
        resolve();
      }
    });
  });
}

async function MontagemFiltro(Etiqueta) { 
  var CodigoDeBarras = "teste"; 
  // 改用Promise版本的函数，确保await能正确等待
  await setFiltroPromise(CodigoDeBarras);
} 

其他可选方案：函数式风格的reduce串行 #

如果你更喜欢函数式编程，可以用Array.reduce来串联所有异步任务：

async function ChamandoEtiquetas() { 
  if (id && NumerosEtiquetas) { 
    // 用reduce串联Promise，初始值是一个已完成的Promise
    await NumerosEtiquetas.reduce(async (prevTask, Etiqueta) => {
      // 等待上一个任务完成
      await prevTask;
      // 处理当前元素
      await MontagemFiltro(Etiqueta);
      // 停顿1秒
      await new Promise(resolve => setTimeout(resolve, 1000));
    }, Promise.resolve()); 
  } 
} 

手动递归方案（适合精细控制场景） #

如果需要更灵活的控制（比如中途可以中断处理），手动递归也是个不错的选择：

async function ChamandoEtiquetas() { 
  if (id && NumerosEtiquetas) { 
    let currentIndex = 0;
    
    const processNextItem = async () => {
      // 终止条件：所有元素处理完毕
      if (currentIndex >= NumerosEtiquetas.length) return;
      
      const currentEtiqueta = NumerosEtiquetas[currentIndex];
      // 处理当前元素
      await MontagemFiltro(currentEtiqueta);
      // 停顿1秒
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      currentIndex++;
      // 递归处理下一个元素
      await processNextItem();
    };
    
    // 启动递归流程
    await processNextItem();
  } 
} 

不管用哪种方案，核心都是让异步任务串行执行，而不是并行。for...of是最直观的选择，推荐优先使用。

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