动画完成后调用JavaScript函数，解决DIV依次脉冲的回调与超时问题

嘿，我完全懂你现在的困扰——本来想让DIV们挨个脉冲，结果全挤在一起动，而且每次完成后要往gameArr里加对应元素的逻辑也没法按顺序走对吧？这其实是处理异步动画时很容易踩的坑，核心问题是你没有正确链式管理异步任务的执行顺序，我来给你一步步解决。

先说说你可能踩的坑 #

大概率你原来的代码是类似这样的：

const divs = document.querySelectorAll('.pulse-div');
const gameArr = [];

// 错误示例：所有DIV同时触发动画
divs.forEach(div => {
  setTimeout(() => {
    pulse(div);
    gameArr.push(div.dataset.color);
  }, 1000);
});

function pulse(element) {
  element.classList.add('pulse');
  setTimeout(() => element.classList.remove('pulse'), 800);
}

为什么会同时触发？因为forEach循环会瞬间执行完所有迭代，所有setTimeout几乎在同一时间被调度，1秒后就一起触发了。而且pulse本身也是异步的，哪怕你给每个超时加不同延迟，也没法保证前一个动画完全结束后再启动下一个。

解决方案1：用Promise+递归链式调用 #

我们可以把脉冲动画包装成返回Promise的函数，然后用递归依次处理每个DIV，确保前一个完成后再启动下一个：

const divs = Array.from(document.querySelectorAll('.pulse-div'));
const gameArr = [];

// 递归处理下一个DIV
function animateNext(index = 0) {
  if (index >= divs.length) return; // 所有元素处理完就退出
  
  const currentDiv = divs[index];
  // 等待当前DIV的脉冲动画完成
  pulse(currentDiv)
    .then(() => {
      // 动画完成后，把对应值加入数组
      gameArr.push(currentDiv.dataset.color);
      // 递归启动下一个DIV的动画
      animateNext(index + 1);
    });
}

// 把脉冲函数改成返回Promise，方便监听完成事件
function pulse(element) {
  return new Promise(resolve => {
    element.classList.add('pulse');
    // 动画结束后移除类，并标记Promise完成
    setTimeout(() => {
      element.classList.remove('pulse');
      resolve();
    }, 800); // 这里是你的动画持续时间
  });
}

// 启动第一个DIV的动画
animateNext();

解决方案2：用async/await（更简洁） #

如果你的环境支持ES6+，用async/await能让异步代码看起来像同步代码，逻辑更直观：

const divs = Array.from(document.querySelectorAll('.pulse-div'));
const gameArr = [];

// 异步函数，按顺序处理所有DIV
async function animateAll() {
  for (const div of divs) {
    await pulse(div); // 等待当前DIV的动画完全结束
    gameArr.push(div.dataset.color); // 结束后再往数组加元素
  }
}

// 同样用Promise包装脉冲函数
function pulse(element) {
  return new Promise(resolve => {
    element.classList.add('pulse');
    setTimeout(() => {
      element.classList.remove('pulse');
      resolve();
    }, 800);
  });
}

// 启动整个动画序列
animateAll();

如果你的pulse函数已经是带回调的版本？ #

要是你没法修改原有的pulse函数（比如它是第三方的，或者已经用了回调），可以把它包装成Promise版本：

// 假设原来的pulse是这样的
function pulse(element, callback) {
  element.classList.add('pulse');
  setTimeout(() => {
    element.classList.remove('pulse');
    callback();
  }, 800);
}

// 包装成Promise
function pulsePromise(element) {
  return new Promise(resolve => pulse(element, resolve));
}

// 之后就可以用上面的async/await或者递归方案了

关键要点总结 #

• 异步任务（动画、超时）不能同时调度，必须等前一个完成后再启动下一个
• Promise是管理异步依赖的利器，async/await则让异步代码更易读
• 递归是传统的异步序列处理方式，适合不支持ES6+的旧环境

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