क्यू विधि

queue विधि हमें तत्व से जुड़े कार्यों की कतार के साथ काम करने की अनुमति देती है। clearQueue विधि भी देखें, जो हमें कतार से सभी ऐसे कार्यों को हटाने की अनुमति देती है जो अभी तक नहीं चलाए गए हैं।

वाक्य - विन्यास

इस तरह हम तत्व से जुड़े निष्पादन के लिए तैयार कार्यों की कतार दिखाते हैं। वैकल्पिक पैरामीटर के रूप में कतार का नाम स्ट्रिंग के रूप में पारित किया जा सकता है (डिफ़ॉल्ट रूप से fx - प्रभावों की मानक कतार):

javascript.queue([कतार का नाम]);

हम कतार में हेरफेर कर सकते हैं। प्रत्येक तत्व के लिए एक बार निष्पादित किया जाता है। इसके लिए दूसरे पैरामीटर के रूप में फ़ंक्शन की एक सरणी पारित की जा सकती है, जो वर्तमान कतार की सामग्री को प्रतिस्थापित कर देगी:

javascript.queue([कतार का नाम], नई कतार );

या दूसरे पैरामीटर के रूप में कतार में जोड़ने के लिए एक नया कॉलबैक-फ़ंक्शन पारित किया जा सकता है। यह फ़ंक्शन बदले में एक अन्य फ़ंक्शन को पैरामीटर के रूप में प्राप्त करता है। यह अनुमति देता है कतार से अगला तत्व स्वचालित रूप से हटाने के लिए और कतार को आगे बढ़ाने के लिए:

javascript.queue([कतार का नाम], कॉलबैक-फ़ंक्शन(next) {
  next();
});

प्रत्येक तत्व में एक या अधिक कतारें हो सकती हैं। कई अनुप्रयोगों में केवल एक (fx) का उपयोग किया जाता है। कतारें तत्व के साथ क्रियाओं के क्रम को अतुल्यकालिक रूप से करने की अनुमति देती हैं, प्रोग्राम निष्पादन में बाधा उत्पन्न किए बिना। कॉलबैक-फ़ंक्शन के साथ queue का कॉल हमें कतार के अंत में एक नया फ़ंक्शन रखने की अनुमति देता है। कॉलबैक-फ़ंक्शन सेट में प्रत्येक तत्व के लिए एक बार निष्पादित किया जाता है। queue का उपयोग करके फ़ंक्शन जोड़ते समय, हमें यह सुनिश्चित करना चाहिए कि बाद में dequeue विधि को कॉल किया जाएगा, ताकि श्रृंखला में अगला फ़ंक्शन काम करना शुरू कर दे।

उदाहरण

आइए एक कस्टम फ़ंक्शन जोड़ें। सबसे पहले, #animate पर क्लिक करने के बाद, हम लाल वर्ग दिखाएंगे, जो 2s के लिए दाईं ओर बढ़ेगा, फिर queue का उपयोग करके हम जोड़ेंगे एक कस्टम फ़ंक्शन, जो वर्ग को हरा रंग में बदल देगा, newcolor क्लास जोड़कर। जैसा कि आप देख सकते हैं, फिर यहाँ dequeue को कॉल किया जाता है, ताकि कतार से फ़ंक्शन को हटाया जा सके। फिर हमारा वर्ग आधे सेकंड के लिए बाईं ओर बढ़ेगा और लाल रंग में वापस बदल जाएगा - दूसरे कस्टम फ़ंक्शन की सहायता से हम newcolor क्लास को हटा देते हैं। एनीमेशन समाप्त होने पर हम अपने वर्ग को छोटा करते हैं:

html<button id="animate">start</button>
<div></div>

cssdiv {
  position: absolute;
  margin: 3px;
  width: 50px;
  height: 50px;
  left: 0px;
  top: 30px;
  background: red;
  display: none;
}

div.newcolor {
  background: green;
}

javascript$('#animate').click(function() {
  $('div')
    .show('slow')
    .animate({left: '+=200'}, 2000)
    .queue(function() {
      $(this).addClass('newcolor').dequeue();
    })
    .animate({left: '-=200'}, 500)
    .queue(function() {
      $(this).removeClass('newcolor').dequeue();
    })
    .slideUp();
});

उदाहरण

आइए पिछली कतार को हटाने के लिए सरणी के रूप में एक कतार जोड़ें। बटन #start पर क्लिक करने पर हम पिछले उदाहरण से एनीमेशन देखेंगे। बटन #stop पर क्लिक करने पर हम एक खाली सरणी जोड़कर एनीमेशन को रोक देंगे। #start पर दोबारा क्लिक करने पर एनीमेशन फिर से शुरू हो जाएगा:

html<button id="start">start</button>
<button id="stop">stop</button>
<div></div>

cssdiv {
  position: absolute;
  margin: 3px;
  width: 50px;
  height: 50px;
  left: 0px;
  top: 30px;
  background: red;
  display: none;
}
div.newcolor {
  background: green;
}     

javascript$('#start').click(function() {
  $('div')
    .show('slow')
    .animate({left: '+=200'}, 5000)
    .queue(function() {
      $(this).addClass('newcolor').dequeue();
    })
    .animate({left: '-=200'}, 1500)
    .queue(function() {
      $(this).removeClass('newcolor').dequeue();
    })
    .slideUp();
});
  
$('#stop').click(function() {
  $('div').queue('fx', []).stop();
});

यह भी देखें