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);
非常优雅。