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/ （警告 – 这将显示一个警报框的负载）。

Answer 1

你可以使用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'); }); 

Answer 2

您可以创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将被取消:)