javascript - 将异步 es6 语法函数转换为 es5 语法异步函数

Question

我正在使用一个包，我正在将该包的函数定义（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)
}

有人能帮我吗？谢谢！

标签： javascriptasynchronousecmascript-6ecmascript-5

Answer 1

本质上，您需要将任何awaits 扩展为承诺，并确保animateOut也将 s 与.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