jQuery $ .animate() एक से अधिक तत्वों लेकिन केवल आग कॉलबैक एक बार

Question

आप jQuery के साथ चेतन करने के लिए एक वर्ग या तत्वों का संग्रह चुनते हैं:

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

और फिर भी कॉलबैक फ़ंक्शन का उपयोग, आप किसी के साथ समाप्त असीमित 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++; 
    }); 
}); 

बेशक यह सिर्फ बुरा कोड और/या डिजाइन है - लेकिन वहाँ कुछ मैं दोनों कॉलबैक का उपयोग कर उनमें से केवल एक के साथ कई animate() कॉल होने से बचा जाता है कि क्या कर सकते हैं, और क्रियान्वित करने अनावश्यक कॉलबैक का भार होने और मेरे कोड/अपेक्षित व्यवहार के साथ खराब?

आदर्श रूप से मैं केवल एक 'डिस्पोजेबल' कॉलबैक को कोड करने में सक्षम हूं जो केवल एक बार चलाएगा - अन्यथा शायद यह जांचने का एक प्रभावी तरीका है कि jQuery द्वारा कुछ एनिमेटेड किया जा रहा है या नहीं?

उदाहरण: 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

आप दूसरी + कॉलबैक ब्लॉक करने के लिए एक चर बना सकते हैं ...

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++; 
     } 
    }); 
}); 

यह केवल बाद के हर कॉलबैक के रूप में एक बार सक्रिय होगा रद्द हो जाएगी :)