将异步 es6 语法函数转换为 es5 语法异步函数答案

【问题标题】：Converting async es6 syntax function to es5 syntax async function将异步 es6 语法函数转换为 es5 语法异步函数
【发布时间】：2021-01-19 21:47:58
【问题描述】：

我正在使用一个包，我正在将该包的函数定义 (https://github.com/3DJakob/react-tinder-card/blob/master/index.js) 转换回 es5 语法，但是，我无法转换 animateOut 函数，因为它是一个异步函数：

const animateOut = async (element, speed, easeIn = false) => {
  const startPos = getTranslate(element)
  const bodySize = getElementSize(document.body)
  const diagonal = pythagoras(bodySize.x, bodySize.y)

  const velocity = pythagoras(speed.x, speed.y)
  const time = diagonal / velocity
  const multiplier = diagonal / velocity

  const translateString = translationString(speed.x * multiplier + startPos.x, -speed.y * multiplier + startPos.y)
  let rotateString = ''

  const rotationPower = 200

  if (easeIn) {
    element.style.transition = 'ease ' + time + 's'
  } else {
    element.style.transition = 'ease-out ' + time + 's'
  }

  if (getRotation(element) === 0) {
    rotateString = rotationString((Math.random() - 0.5) * rotationPower)
  } else if (getRotation(element) > 0) {
    rotateString = rotationString((Math.random()) * rotationPower / 2 + getRotation(element))
  } else {
    rotateString = rotationString((Math.random() - 1) * rotationPower / 2 + getRotation(element))
  }

  element.style.transform = translateString + rotateString

  await sleep(time * 1000)
}

有人可以帮助我吗？谢谢！

【问题讨论】：

只需将await 替换为return - 只有一个，它位于函数的末尾。
您是否尝试过使用转译器？他们被要求自动完成这项工作。

标签： javascript asynchronous ecmascript-6 ecmascript-5

【解决方案1】：

基本上你需要将任何awaits 扩展为一个promise，并确保animateOut 也被.then() 处理，而不是await：

var animateOut = function(element, speed, easeIn) {
  easeIn = easeIn || false;
  // animateOut code here
  return sleep(1000).then(function() {
    console.log('Already slept, done.')
  })
}

animateOut().then(function() {
  console.log('Done animating out')
})


function sleep(time) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve();
    }, time)
  })
}

jsfiddle

【讨论】：