如何在没有箭头函数的情况下重写这个 JS 方法？

Question

我需要从 animate.style 中删除以下方法的箭头函数；我需要在不支持箭头功能的旧版 chromium 浏览器 (40) 上运行此代码。我正在尝试将其转变为传统的遗留函数，但由于我的大脑似乎只使用箭头函数，所以不断出现语法错误。非常感谢您对这一挑战的任何帮助！

const animateCSS = (element, animation, prefix = 'animate__') =>
  // We create a Promise and return it
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);

    node.classList.add(`${prefix}animated`, animationName);

    // When the animation ends, we clean the classes and resolve the Promise
    function handleAnimationEnd(event) {
      event.stopPropagation();
      node.classList.remove(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd, {once: true});
  });

这就是我们使用上述方法的方式，其中还包含一个箭头函数：

animateCSS('.my-element', 'bounce');

// or
animateCSS('.my-element', 'bounce').then((message) => {
  // Do something after the animation
});

Answer 1

删除 =>。 在功能块之前添加功能关键字。 不要留下任何未包装的块。

const animateCSS = function (element, animation, prefix = 'animate__') {
  // We create a Promise and return it
  new Promise(function (resolve, reject) {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);

    node.classList.add(`${prefix}animated`, animationName);

    // When the animation ends, we clean the classes and resolve the Promise
    function handleAnimationEnd(event) {
      event.stopPropagation();
      node.classList.remove(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd, {once: true});
  });
  }
  
  animateCSS('.my-element', 'bounce');

// or
animateCSS('.my-element', 'bounce').then(function (message) {
  // Do something after the animation
});```