jQuery的$ .animate()多个元素,但只消防一次callback

如果您select一个类或元素的集合来使用jQuery进行animation处理:

$('.myElems').animate({....}); 

然后也使用callback函数,你最终会有很多不必要的animate()调用。

 var i=1; $('.myElems').animate({width:'200px'}, 200, function(){ //do something else $('#someOtherElem').animate({opacity:'1'}, 300, function(){ if (i>1) console.log('the '+i+'-th waste of resources just finished wasting your resources'); i++; }); }); 

可以说这只是不好的代码和/或devise – 但是有一些我可以做的事情,都避免了使用callback只有一个有很多animate()调用,并有一个不必要的callback负载执行和拧我的代码/预期的行为?

理想情况下,我只能编写一个只能运行一次的“一次性”callback – 否则可能有一种有效的方法来testing是否已经由jQueryanimation?

例如: http : //jsfiddle.net/uzSE6/ (警告 – 这将显示一个警报框的负载)。

你可以使用when像:

 $.when($('.myElems').animate({width: 200}, 200)).then(function () { console.log('foo'); }); 

http://jsfiddle.net/tyqZq/

替代版本:

 $('.myElems').animate({width: 200}, 200).promise().done(function () { console.log('foo'); }); 

您可以创build一个variables来阻止第二个+callback…

 var i=1; $('.myElems').animate({width:'200px'}, 200, function(){ //do something else $('#someOtherElem').animate({opacity:'1'}, 300, function(){ if (i>1) return; else { console.log('the '+i+'-th waste of resources just finished wasting your resources'); i++; } }); }); 

这只会触发一次,因为每一个后续的callback将被取消:)