如何让async函数在DOM事件监听器回调触发时resolve并返回

async函数的返回值会被自动包装为Promise，你可以手动在函数内部返回一个自定义Promise，在animationend的事件回调里调用这个Promise的resolve方法即可控制返回时机。

完整实现代码如下：

async function Animate(element) {
  // 触发动画的逻辑写在这里
  element.style.animation = '自定义动画名 1s ease forwards';

  // 返回自定义Promise控制异步完成时机
  return new Promise(resolve => {
    // 单独定义事件处理函数，方便后续移除监听
    function onAnimationEnd(event) {
      // 可选判断：过滤子元素冒泡上来的动画事件，只响应当前元素的动画结束
      if (event.target === element) {
        // 移除事件监听避免内存泄漏
        element.removeEventListener('animationend', onAnimationEnd);
        // 支持将事件对象返回给调用方
        resolve(event);
      }
    }
    element.addEventListener('animationend', onAnimationEnd);
  });
}

调用方式 #

// 方式1：用await等待动画完成
const endEvent = await Animate(document.querySelector('#目标元素'));
console.log('动画执行完毕', endEvent);

// 方式2：用.then链式调用
Animate(document.querySelector('#目标元素')).then(event => {
  console.log('动画执行完毕', event);
});

注意事项 #

• 不要直接用匿名函数作为事件回调，单独定义处理函数才能在完成后移除对应监听，避免内存泄漏
• 如果需要处理动画异常中断的场景，可以同时监听animationcancel事件，根据业务需求选择resolve或者reject当前Promise

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