将异步 es6 语法 function 转换为 es5 语法异步 function

Question

I'm working with a package where I'm converting the function definitions of that package ( https://github.com/3DJakob/react-tinder-card/blob/master/index.js ) back to es5 syntax, however, I'm not being able to convert the animateOut function since it is an async function:

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)
}

Can someone help me? Thanks!

Answer 1

Essentially you'll need to expand any await s to a promise, and make sure that the animateOut is also treated with .then() as opposed to 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