jQuery داده - روش queue()

دستورالعمل داده jQuery

مثال

نمایش طول توالی:

function showIt() {
  var n = div.queue("fx");
  $("span").text( n.length );      
  setTimeout(showIt, 100);
}

آزمایش شخصی کنید

تعریف و استفاده

queue() روشی است که توالی توابعی که بر روی عنصر تطبیق داده شده اجرا می‌شوند را نمایش می‌دهد یا عمل می‌کند.

عبارت

.queue(queueName)
پارامترها توضیحات
queueName اختیاری. مقدار زبانی شامل نام توالی.

عمل بر روی توالی

queue() روشی است که توالی توابعی که بر روی عنصر تطبیق داده شده اجرا می‌شوند را عمل می‌کند.

عبارت

.queue(queueName,newQueue)
پارامترها توضیحات
queueName اختیاری. مقدار زبانی شامل نام توالی.

توضیحات

هر عنصر می‌تواند یک یا چند توالی از توابع اضافه شده توسط jQuery داشته باشد. در اغلب برنامه‌ها، تنها از یک توالی استفاده می‌شود (به نام fx). توالی‌ها به صورت غیر سریعی بر روی عنصر فراخوانی می‌شوند و اجرای برنامه را متوقف نمی‌کنند. مثال‌های معمول فراخوانی چندین روش انیمیشن بر روی عنصر هستند. به عنوان مثال:

$('#foo').slideUp().fadeIn();

وقتی این جمله اجرا می‌شود، عنصر بلافاصله شروع به اجرای آهنگ حرکت خود می‌کند، اما گذار مات بودن در توالی fx قرار دارد، که تنها پس از پایان آهنگ حرکت شروع به اجرا می‌شود.

مетод .queue() به ما اجازه می‌دهد تا مستقیماً بر روی توالی این توابع عمل کنیم. استفاده از روش .queue() با فراخوانی‌های بازگشتی بسیار مفید است؛ این امکان را می‌دهد که یک تابع جدید را در انتهای توالی قرار دهیم.

این ویژگی مشابه روش‌های آهنگی است که فراخوانی‌های بازگشتی ارائه می‌دهند، اما نیازی به تنظیم فراخوانی‌های بازگشتی در طول اجرای آهنگ نیست.

$('#foo').slideUp();
$('#foo').queue(function() {
  alert('Animation complete.');
  $("this").dequeue();
});;

این مشابه است با:

$('#foo').slideUp(function() {
  alert('Animation complete.');
);

لطفاً توجه داشته باشید که هنگام افزودن توابع از طریق .queue()، باید از .dequeue() اطمینان حاصل کنیم تا توابع بعدی در توالی اجرا شوند.

مثال 1

عملیات توالی برای توابع سفارشی انجام دهید:

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

آزمایش شخصی کنید

مثال 2

تنظیم آرایه‌ی خط مشی برای حذف خط مشی:

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

آزمایش شخصی کنید

دستورالعمل داده jQuery