A-A+
jQuery 动画 promise()方法使用例子
promise是一个动画事件了,我们可以利用它来创建很多各种动画效果了,下面小编为各位介绍jQuery 动画 promise()方法使用例子
jQuery 的 show、hide 方法大家都好熟悉的,也知道它可以接受一个回调函数,用于动画完成后执行。比如:
- $('.js-sam').hide('slow', function() {
- alert('你刚刚隐藏了 sam');
- });
但是,jQuery 1.8 以后版本还提供了另一种书写风格,即 Promise – 这个中文翻译好难,目前看到有叫承诺的 – 我还是继续用 Promise 的叫法。譬如上面的示例代码,我们可以改成这样:
- var promiseMeHideSam = $('.js-sam').hide('slow').promise();
- function whenDone() {
- alert('你刚刚隐藏了 sam');
- }
- promiseMeHideSam.done(whenDone);
这里,promise() 方法未传递参数,则默认为 fx,表示动画效果。
Promise 比起回调(callback),有非常多好处,最明显的一个,我们可以把动画完成后要执行的所有回调动作解构。因为给 hide 函数传递回调的话,我们只能把所有动作写入该回调中,比如:
- $('.js-sam').hide('slow', function() {
- // 触发一
- // 触发二
- // 触发三
- });
但如果是 Promise 的写法:
- func1() {}
- func2() {}
- func3() {}
- promiseMehideSam.done(func1);
- promiseMehideSam.done(func2);
- promiseMehideSam.done(func3);
我们可以把三个触发结果分解到三个函数中,而不必写入一个庞大的回调函数里,一来不便维护代码,二来也不易阅读。
另外一种常见情形,比如我们要在动画 A 与动画 B 都结束后执行某个回调。如果照第一种传递回调函数的方法 – 就我所知,没法写。但 Promise 就可以:
- var animate1 = $('.js-sam').hide().promise();
- var animate2 = $('.js-hi').show().promise();
- function whenBothEnd() {
- // animate1 与 animate2 结束后执行
- console.log('动画全部结束');
- }
- $.when(animate1, animate2).done(whenBothEnd);
非常优雅。