A-A+

jQuery 动画 promise()方法使用例子

2016年01月11日 前端设计 暂无评论 阅读 8 views 次

promise是一个动画事件了,我们可以利用它来创建很多各种动画效果了,下面小编为各位介绍jQuery 动画 promise()方法使用例子

jQuery 的 show、hide 方法大家都好熟悉的,也知道它可以接受一个回调函数,用于动画完成后执行。比如:

  1. $('.js-sam').hide('slow', function() {  
  2.     alert('你刚刚隐藏了 sam');  
  3. });  

但是,jQuery 1.8 以后版本还提供了另一种书写风格,即 Promise – 这个中文翻译好难,目前看到有叫承诺的 – 我还是继续用 Promise 的叫法。譬如上面的示例代码,我们可以改成这样:

  1. var promiseMeHideSam = $('.js-sam').hide('slow').promise();  
  2. function whenDone() {  
  3.     alert('你刚刚隐藏了 sam');  
  4. }  
  5. promiseMeHideSam.done(whenDone);  

这里,promise() 方法未传递参数,则默认为 fx,表示动画效果。

Promise 比起回调(callback),有非常多好处,最明显的一个,我们可以把动画完成后要执行的所有回调动作解构。因为给 hide 函数传递回调的话,我们只能把所有动作写入该回调中,比如:

  1. $('.js-sam').hide('slow', function() {  
  2.   // 触发一  
  3.   // 触发二  
  4.   // 触发三  
  5. });  

但如果是 Promise 的写法:

  1. func1() {}  
  2. func2() {}  
  3. func3() {}  
  4. promiseMehideSam.done(func1);  
  5. promiseMehideSam.done(func2);  
  6. promiseMehideSam.done(func3);  

我们可以把三个触发结果分解到三个函数中,而不必写入一个庞大的回调函数里,一来不便维护代码,二来也不易阅读。

另外一种常见情形,比如我们要在动画 A 与动画 B 都结束后执行某个回调。如果照第一种传递回调函数的方法 – 就我所知,没法写。但 Promise 就可以:

  1. var animate1 = $('.js-sam').hide().promise();  
  2. var animate2 = $('.js-hi').show().promise();  
  3. function whenBothEnd() {  
  4.   // animate1 与 animate2 结束后执行  
  5.   console.log('动画全部结束');  
  6. }  
  7. $.when(animate1, animate2).done(whenBothEnd);  

非常优雅。

标签:

给我留言