异步方法链接

时间:2017-07-15 12:52:50

标签: javascript asynchronous ecmascript-6 promise

我正在尝试实现相同asynchronous方法的链接。基本上我想要做的只是致电animation.animate({}).animate({})。第一个动画方法需要在第一个动画方法完成后调用。

这就是我所做的,我认为它很接近,但我仍然无法找到如何使它发挥作用。

class Animation {

    constructor() {
        this.queue = new Promise((resolve,reject)=> {resolve()})
    }  

    animate(params) {
        this.queue.then(() => {
            return this.cssAnimate(params);
        })
        return this;
    }

    cssAnimate(params) {
        return new Promise((resolve,reject) => {
        //do stuff to animate

        params.el.addEventListener('transitionend', () => {resolve()})
        })
    }

}

let animation = new Animation();

animation
    .animate({}) 
    .animate({})

1 个答案:

答案 0 :(得分:0)

您需要使用'this.queue.then'获得的新承诺重新分配this.queue

class Animation {

  constructor() {
    this.queue = Promise.resolve()
  }  

  animate(params) {
    this.queue = this.queue.then(() => this.cssAnimate(params))
    return this;
  }

  cssAnimate(params) {
    const {el, clz} = params
    
    return new Promise(resolve => {
      el.addEventListener('transitionend', resolve)
      el.classList.toggle(clz)
    })
  }
}


document.querySelector('#play').addEventListener('click', () => {
  let animation = new Animation();
  const el = document.querySelector('.box')

  animation
    .animate({
      el,
      clz: 'left'
    }) 
    .animate({
      el,
      clz: 'left'
    })
})
.box {
  background-color: pink;
  width: 100px;
  height: 100px;
  margin-left: 0;  
  transition: all 3s linear;
}

.left {
  
  margin-left: 200px;
}
<div class="box"></div>
<button id="play">Play</div>