jQuery 3.3

.queue()




jquery
إظهار أو التعامل مع قائمة انتظار الوظائف التي سيتم تنفيذها على العناصر المتطابقة.

.queue ([queueName]) إرجاع: Array

الوصف: إظهار قائمة انتظار المهام التي سيتم تنفيذها على العناصر المتطابقة.

  • الإصدار المضاف: 1.2 .queue ([queueName])

    • QUEUENAME
      اكتب: String
      سلسلة تحتوي على اسم قائمة الانتظار. الافتراضيات إلى fx ، قائمة الانتظار القياسية الآثار.

مثال:

إظهار طول قائمة الانتظار.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>queue demo</title>
  <style>
  div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 60px;
    background: green;
    display: none;
  }
  div.newcolor {
    background: blue;
  }
  p {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>The queue length is: <span></span></p>
<div></div>
 
<script>
var div = $( "div" );
 
function runIt() {
  div
    .show( "slow" )
    .animate({ left: "+=200" }, 2000 )
    .slideToggle( 1000 )
    .slideToggle( "fast" )
    .animate({ left: "-=200" }, 1500 )
    .hide( "slow" )
    .show( 1200 )
    .slideUp( "normal", runIt );
}
 
function showIt() {
  var n = div.queue( "fx" );
  $( "span" ).text( n.length );
  setTimeout( showIt, 100 );
}
 
runIt();
showIt();
</script>
 
</body>
</html>

عرض:

.queue ([queueName]، newQueue) الإرجاع: jQuery

الوصف ؛: التعامل مع قائمة انتظار المهام التي سيتم تنفيذها ، مرة واحدة لكل عنصر متطابقة.

  • الإصدار المضاف: 1.2 .queue ([queueName] ، newQueue)

    • QUEUENAME
      اكتب: String
      سلسلة تحتوي على اسم قائمة الانتظار. الافتراضيات إلى fx ، قائمة الانتظار القياسية الآثار.
    • newQueue
      اكتب: Array
      مجموعة من الوظائف لاستبدال محتويات قائمة الانتظار الحالية.
  • الإصدار المضاف: 1.2 .queue ([queueName] ، رد الاتصال)

    • QUEUENAME
      اكتب: String
      سلسلة تحتوي على اسم قائمة الانتظار. الافتراضيات إلى fx ، قائمة الانتظار القياسية الآثار.
    • أتصل مرة أخرى
      النوع: Function ( Function التالية ())
      وظيفة جديدة لإضافة إلى قائمة الانتظار ، مع وظيفة للاتصال التي سوف dequeue العنصر التالي.

يمكن أن يحتوي كل عنصر على قوائم انتظار واحدة للعديد من الوظائف المرتبطة به بواسطة jQuery. في معظم التطبيقات ، يتم استخدام قائمة انتظار واحدة فقط (تسمى fx ). تسمح قوائم الانتظار بتسلسل الإجراءات على عنصر بشكل غير متزامن ، دون إيقاف تنفيذ البرنامج. المثال النموذجي لهذا هو استدعاء أساليب حركة متعددة على عنصر. فمثلا:

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

عندما يتم تنفيذ هذه العبارة ، يبدأ العنصر في انزلاق الرسوم المتحركة على الفور ، ولكن يتم وضع الانتقال الباهت في قائمة انتظار fx ليتم استدعاؤها فقط بمجرد اكتمال النقل المنزلق.

تسمح لنا طريقة .queue() مباشرة مع قائمة انتظار الوظائف هذه. يعتبر الاتصال .queue() مع معاودة الاتصال مفيدًا بشكل خاص ؛ يسمح لنا بوضع وظيفة جديدة في نهاية قائمة الانتظار. يتم تنفيذ وظيفة معاودة الاتصال مرة واحدة لكل عنصر في مجموعة jQuery.

تشبه هذه الميزة توفير وظيفة رد اتصال مع طريقة متحركة ، ولكنها لا تتطلب إعادة الاتصال في وقت إجراء الرسم المتحرك.

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

هذا يعادل:

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

لاحظ أنه عند إضافة دالة بـ .queue() ، يجب أن نضمن أن يتم .dequeue() النهاية بحيث يتم تنفيذ الوظيفة التالية في السطر.

اعتبارًا من jQuery 1.4 ، يتم تمرير الدالة التي تسمى دالة أخرى كالوسيطة الأولى. عندما يتم استدعاؤها ، فإن هذا يزيل العنصر التالي تلقائيًا ويحتفظ بقائمة الانتظار. نحن نستخدمها على النحو التالي:

$( "#test" ).queue(function( next ) {
    // Do some stuff...
    next();
});

أمثلة:

طابور وظيفة مخصصة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>queue demo</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>
 
Click here...
<div></div>
 
<script>
$( document.body ).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();
});
</script>
 
</body>
</html>

عرض:

قم بتعيين صف صفيف لحذف قائمة الانتظار.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>queue demo</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">Start</button>
<button id="stop">Stop</button>
<div></div>
 
<script>
$( "#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();
});
</script>
 
</body>
</html>

عرض: