পদ্ধতি queue

পদ্ধতি queue আমাদেরকে এলিমেন্টের সাথে সংযুক্ত ফাংশনগুলির কিউ এর সাথে কাজ করতে দেয়। পদ্ধতি clearQueue ও দেখুন, যা আমাদেরকে কিউ থেকে সেই সমস্ত ফাংশন সরিয়ে দিতে দেয় যেগুলো এখনও চালু হয়নি।

বাক্য গঠন

এভাবে আমরা এলিমেন্টের সাথে সংযুক্ত নির্বাহযোগ্য ফাংশনগুলির কিউ দেখাই। ঐচ্ছিক প্যারামিটার হিসেবে স্ট্রিং আকারে কিউর নাম পাঠানো যেতে পারে (ডিফল্ট হিসেবে fx - ইফেক্টের স্ট্যান্ডার্ড কিউ):

javascript.queue([কিউর নাম]);

আমরা কিউ ম্যানিপুলেট করতে পারি। প্রতিটি এলিমেন্টের জন্য একবার করে নির্বাহ করা হয়। এজন্য দ্বিতীয় প্যারামিটার হিসেবে ফাংশনগুলির অ্যারে পাঠানো যেতে পারে, যা বর্তমান কিউর কন্টেন্ট প্রতিস্থাপন করবে:

javascript.queue([কিউর নাম], নতুন কিউ );

অথবা কিউতে যোগ করার জন্য দ্বিতীয় প্যারামিটার হিসেবে নতুন callback-ফাংশন পাঠানো যেতে পারে। এই ফাংশনটি আবার প্যারামিটার হিসেবে অন্য একটি ফাংশন পায়। এটি স্বয়ংক্রিয়ভাবে কিউ থেকে পরবর্তী আইটেম সরাতে এবং কিউ অ্যাডভান্স করতে দেয়:

javascript.queue([কিউর নাম], callback-ফাংশন(next) {
  next();
});

প্রতিটি এলিমেন্টের এক বা একাধিক কিউ থাকতে পারে। অনেক অ্যাপ্লিকেশনে শুধুমাত্র একটি (fx) ব্যবহৃত হয়। কিউগুলি প্রোগ্রাম নির্বাহ বাধাগ্রস্ত না করেই এলিমেন্টের সাথে ক্রমানুসারে কাজ করা সম্ভব করে। queue কে callback-ফাংশন সহ কল করা আমাদেরকে কিউর শেষে একটি নতুন ফাংশন রাখতে দেয়। callback-ফাংশন সেটের প্রতিটি এলিমেন্টের জন্য একবার করে নির্বাহ করা হয়। queue ব্যবহার করে ফাংশন যোগ করার সময়, আমাদেরকে নিশ্চিত করতে হবে যে পরবর্তীতে dequeue মেথডটি কল করা হবে, যাতে চেইনের পরবর্তী ফাংশনটি কাজ করা শুরু করে।

উদাহরণ

আসুন একটি কাস্টম ফাংশন যোগ করি। প্রথমে, #animate এ ক্লিক করার পর, আমরা একটি লাল বর্গক্ষেত্র দেখাব, যা 2সে সময় ধরে ডানদিকে চলবে, তারপর queue ব্যবহার করে আমরা একটি কাস্টম ফাংশন যোগ করব, যা বর্গক্ষেত্রটিকে সবুজ করে রাঙাবে, newcolor ক্লাস যোগ করে। আপনি দেখতে পাচ্ছেন, তারপর এখানে dequeue কল করা হয়েছে, কিউ থেকে ফাংশনটি সরানোর জন্য। তারপর আমাদের বর্গক্ষেত্রটি অর্ধসেকেন্ড বামদিকে চলবে এবং লালে ফিরে যাবে - দ্বিতীয় কাস্টম ফাংশন ব্যবহার করে আমরা newcolor ক্লাস সরিয়ে দিচ্ছি। অ্যানিমেশন শেষ হলে আমরা আমাদের বর্গক্ষেত্রটি ভেঙে ফেলি:

html<button id="animate">শুরু</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">শুরু</button>
<button id="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();
});

আরও দেখুন