التابع `‎‎jQuery.queue()‎`‎ في jQuery

يعرض هذا التابع أو يعدِّل طابور الدوال المراد تنفيذها على العنصر المطابق.

`jQuery.queue( element [, queueName ] )‎`

القيم المعادة

يعيد مصفوفةً (Array).

الوصف

يعرض هذا التابع طابور الدوال المراد تنفيذها على العنصر المطابق.

`jQuery.queue( element [, queueName ] )‎`

أُضيف مع الإصدار: 1.3.

`element`

عنصر DOM الذي سيُبحث عن طابور الانتظار المرتبط به.

`queueName`

سلسلة نصية تحتوي على اسم الطابور. القيمة الافتراضيَّة هي fx وهو اسم طابور التأثيرات القياسي.

ملاحظة: هذا التابع ذو مستوًى منخفض، لذا يجب عليك استعمال التابع ‎.queue()‎ عوضًا عنه.

أمثلة

عرض طول الطابور المرتبط بعنصر:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.queue مثالٌ عن استعمال التابع</title>
  <style>
  div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 30px;
    background: green;
    display: none;
  }
  div.newcolor {
    background: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="show">Show Length of Queue</button>
<span></span>
<div></div>
 
<script>
$( "#show" ).click(function() {
  var n = jQuery.queue( $( "div" )[ 0 ], "fx" );
  $( "span" ).text( "Queue length is: " + n.length );
});
 
function runIt() {
  $( "div" )
    .show( "slow" )
    .animate({
      left: "+=200"
    }, 2000 )
    .slideToggle( 1000 )
    .slideToggle( "fast" )
    .animate({
      left: "-=200"
    }, 1500 )
    .hide( "slow" )
    .show( 1200 )
    .slideUp( "normal", runIt );
}
 
runIt();
</script>
 
</body>
</html>

`jQuery.queue( element, queueName, newQueue )‎`

القيم المعادة

يعيد كائنًا من النوع jQuery.

الوصف

يعدِّل هذا التابع طابور الدوال المراد تنفيذها على العنصر المطابق.

`jQuery.queue( element, queueName, newQueue )‎`

أُضيف مع الإصدار: 1.3.

`element`

عنصر DOM الذي يراد تعديل الطابور المرتبط به.

`queueName`

سلسلة نصية تحتوي على اسم الطابور. القيمة الافتراضيَّة هي fx وهو اسم طابور التأثيرات القياسي.

`newQueue`

مصفوفةٌ تحتوي على الدوال التي يراد أن تحلَّ مكان الدوال المنتظرة في الطابور.

`jQuery.queue( element, queueName, callback )‎`

أُضيف مع الإصدار: 1.3.

`element`

عنصر DOM الذي يراد تعديل الطابور المرتبط به.

`queueName`

سلسلة نصية تحتوي على اسم الطابور. القيمة الافتراضيَّة هي fx وهو اسم طابور التأثيرات القياسي.

`callback`

دالةٌ من الشكل Function()‎ تمثِّل الدالة الجديدة التي يراد إضافتها إلى الطابور.

ملاحظة: هذا التابع ذو مستوًى منخفض، لذا يجب عليك استعمال التابع ‎.queue()‎ عوضًا عنه.

يمكن أن يرتبط مع كل عنصر طابورٌ واحدٌ من الدوال أو أكثر في jQuery. يستخدم في أغلب التطبيقات طابورٌ واحدٌ فقط يدعى fx. الغرض من استعمال الطوابير هو تطبيق سلسلة من الأحداث على عنصر، إذ تجري عمليَّة الاستدعاء بشكل غير متزامن دون مقاطعة أو إيقاف تنفيذ التطبيق.

يوفر التابع jQuery.queue()‎ إمكانيَّة تعديل أيِّ طابورٍ بشكل مباشر؛ فيمكن مثلًا إضافة دالة رد نداء في نهاية طابور محدَّد بتمرير هذه الدالة إلى التابع.

انتبه عند إضافة دوال إلى طابور باستعمال التابع jQuery.queue()‎ إلى أنَّه يجب التأكُّد من استعمال التابع jQuery.dequeue()‎ في نهاية المطاف من أجل تنفيذ الدالة التي تنتظهر أن يحين دورها في الطابور.

أمثلة

وضع دالةٍ مخصَّصة في طابورٍ:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.queue مثالٌ عن استعمال التابع</title>
  <style>
  div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 30px;
    background: green;
    display: none;
  }
  div.newcolor {
    background: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
اضغط هنا
<div></div>
 
<script>
$( document.body ).click(function() {
  var divs = $( "div" )
    .show( "slow" )
    .animate({ left: "+=200" }, 2000 );
  jQuery.queue( divs[ 0 ], "fx", function() {
    $( this ).addClass( "newcolor" );
    jQuery.dequeue( this );
  });
  divs.animate({ left: "-=200" }, 500 );
  jQuery.queue( divs[ 0 ], "fx", function() {
    $( this ).removeClass( "newcolor" );
    jQuery.dequeue( this );
  });
  divs.slideUp();
});
</script>
 
</body>
</html>

تعيين مصفوفة فارغة لتحلَّ مكان محتويات الطابور فيُمسح بذلك محتواه:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.queue مثالٌ عن استعمال التابع</title>
  <style>
  div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 30px;
    background: green;
    display: none;
  }
  div.newcolor {
    background: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="start">ابدأ</button>
<button id="stop">توقف</button>
<div></div>
 
<script>
$( "#start" ).click(function() {
  var divs = $( "div" )
    .show( "slow" )
    .animate({ left: "+=200" }, 5000 );
  jQuery.queue( divs[ 0 ], "fx", function() {
    $( this ).addClass( "newcolor" );
    jQuery.dequeue( this );
  });
  divs.animate({ left: "-=200" }, 1500 );
  jQuery.queue( divs[ 0 ], "fx", function() {
    $( this ).removeClass( "newcolor" );
    jQuery.dequeue( this );
  });
  divs.slideUp();
});
$( "#stop" ).click(function() {
  jQuery.queue( $( "div" )[ 0 ], "fx", [] );
  $( "div" ).stop();
});
</script>
 
</body>
</html>

مصادر

صفحة التابع ()jQuery.queue في توثيق jQuery الرسمي.