Question

我已经编写了在JS中为动画生成帧的函数，我想通过完成动画来使用链接方式来调用回调函数。为此我编写了以下代码：

var _proto = Array.prototype;

var Animation = function( duration, callback ) {
 var begin = new Date(), delta, then = []
  , cid = setInterval(function(){
      delta = (new Date() - begin) / duration;
      delta > 1 && ( delta = 1 )
       callback( delta )
        if( delta === 1 ) { 
         clearInterval( cid );
          if( then.length ) {
           var i = 0;
             for( ; i < then.length; i++ ) {
              then[i].call( this )
            }
          }
        }
      }, 10 );
   return { 
     then : function(){
      _proto.push.apply( then , _proto.slice.call( arguments ) );
      return this;
    } 
  }
};

并以这种方式使用它：

Animation( 450 , function( delta ){
 // frames
}).then(function(){
   // after finish 
})

是创建＆＃34;然后＆＃34;的好方法。在这种情况下的方法？或者你可以提出任何建议。

Answer 1

如果您定位modern browsers，则可以创建没有任何库的承诺。您的代码应如下所示：

var Animation = function( duration, callback ) {
    return new Promise(function (fulfill, reject) {
        // Your code ...
        setInterval(function(){
            // More of your code ...
            if (something) {
                // When it's done ...
                fulfill()
            }
        }, 10)
    })
}

返回的promise对象应该有then方法。

通过在JS中完成动画来回调

1 个答案: