一聚教程网:一个值得你收藏的教程网站

热门教程

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

时间:2022-06-25 17:43:19 编辑:袖梨 来源:一聚教程网


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

热门栏目