تبسيط البرمجة ب JavaScript باستخدام jQuery


الدرس: قوائم الانتظار والتوقيت


الصفحة السابقة
يستمر هذا الفصل في تدريبك على الرسوم المتحركة. من بين أمور أخرى ، سوف تتعلم كيفية ربط سلسلة الرسوم المتحركة الخاصة بك ، أو كيفية تشغيلها في وقت واحد ، وكيفية تكرار الرسوم المتحركة إلى ما لا نهاية ، وكيفية إعداد مؤقت لتشغيل الكود على فترات منتظمة.

قوائم انتظار JQUERY


الرسوم المتحركة JQuery غير متزامنة ، أي أنها تعمل في الخلفية. إذا قمت بتقييد اثنين من الرسوم المتحركة باستخدام بيان من النوع التالي:

$('sel').animate(…).animate(…);
... ثم تبدأ الرسوم المتحركة الثانية عندما تنتهي الأولى. هذا هو السلوك التلقائي ل jQuery : يتم وضع الرسوم المتحركة في قائمة انتظار وتتبع واحدة تلو الأخرى. إذا كنت تريد تشغيل العديد من الرسوم المتحركة في نفس الوقت ، فما عليك سوى تحديد خصائص CSS لتعديلها في الوظيفة الأولى من الطريقة animate() :

$('sel').animate({ prop1: val1, prop2: val2, } …);
ولكن في هذه الحالة ، فإن سرعة تنفيذ كل الرسوم المتحركة هي نفس السرعة. إذا كنت ترغب في تشغيل العديد من الرسوم المتحركة في نفس الوقت ، ولكل منها سرعة التنفيذ الخاصة به ، يجب عليك استخدام تقنية معينة ، بناءً على استخدام الخاصية queue في بناء الجملة الثانية للطريقة animate() :

$('sel').animate({ prop1: val1, prop2: val2, prop3: val3, etc. }, {queue: …});
دعونا نرى كل هذا عن طريق التفكير في مثال عملي. سنطبق حركتين على صورة: الأول سيزيد تدريجياً عرض الحد والثاني سينقص حجم الصورة تدريجياً. هنا هو الكود المستخدم:

<button id="enchainer">ترابط الصور المتحركة</button>
<button id="nePasEnchainer">لا تقم بربط الصور المتحركة</button><br />
<button id="executerEnMemeTemps">نفذ الصور المتحركة في نفس الوقت</button>
<button id="etatInitial"> الحالة الأولية </button><br /><br />
<img src="logo.png" style="border: 2px black solid;">

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#enchainer').click( function() {
      $('img').animate({ 'border-width': '100'}, 1500 )
              .animate({ 'width': '-=100'}, 1500);
    });  
    $('#nePasEnchainer').click( function() {
      $('img').animate({ 'border-width': '100'}, { queue: false, duration: 1500 })
              .animate({ 'width': '-=100'}, 1500);
    }); 
    $('#executerEnMemeTemps').click( function() {
      $('img').animate({ 'border-width': '100', 'width': '-=100' }, 1500);
    }); 
    $('#etatInitial').click( function() {
      $('img').css({'border-width': '2px', width: '200'});
    });  
  });
</script>
جرب الكود
يعرّف نص المستند أربعة أزرار بالإضافة إلى صورة يتم تعريف حدودها بنمط CSS .
عندما يقوم المستخدم بالنقر فوق الزر الأول ، يتم توسيع حدود الصورة إلى 100 بكسل في 1500 مللي ثانية:

$('img').animate({ 'border-width': '100'}, 1500 )
بمجرد الانتهاء من هذه الرسوم المتحركة الأولى ، ينخفض عرض الصورة بمقدار 100 بكسل في 1500 مللي ثانية:

.animate({ 'width': '-=100'}, 1500);
حاول عرض هذه الصفحة في متصفح وانقر على الزر الأول. كما ترون ، يتم تغيير حد الصورة ، ويتم تغيير حجم الصورة.
عند النقر فوق الزر الثاني ، يتم توسيع حدود الصورة إلى 100 بكسل في 1500 مللي ثانية . بما أن الخاصية queue وقعت تهيئتها false، يتم تشغيل الرسوم المتحركة الثانية في نفس الوقت الذي تتم فيه الحركة الأولى. نظرًا لأن كلتا الرسوم المتحركة لهما نفس المدة ، فسيتم تشغيلهما في الوقت نفسه تمامًا:

$('img').animate({ 'border-width': '100'}, { queue: false, duration: 1500 })
        .animate({ 'width': '-=100'}, 1500);
حاول عرض هذه الصفحة في متصفح وانقر على الزر الثاني. تعديل الحدود وتغيير حجم الصورة تتم بالتوازي. عند النقر على الزر الثالث ، يتم تنفيذ كلتا الحركتين بالتوازي:

$('img').animate({ 'border-width': '100', 'width': '-=100' }, 1500);
حاول اعرض هذه الصفحة في متصفح وحاول أن تجد فرقًا بين الرسوم المتحركة المرتبطة بالأزرار الثانية والثالثة ... هل تواجه مشكلة في التمييز بينها؟ هذا أمر طبيعي تمامًا لأنهم ينتجون نفس التأثير.
ولكن بعد ذلك ، لماذا استخدام رمز الزر الثاني؟ إنها أكثر تعقيدًا وتنتج نفس التأثير!
أنت محق في تفصيل واحد: إذا كان للمعالجين نفس التأثير ، فذلك لأن الرسوم المتحركة لها مدة مماثلة. حاول تغيير القيمة المعينة للخاصية duration في الطريقة $('#nePasEnchainer').click() . على سبيل المثال ، قم بتعيين القيمة إلى 500 وقم بعرض النتيجة. الآن تعيين 3000 لهذه الخاصية وعرض النتيجة. أنا متأكد من أنك الآن تفهم أهمية الكود المرفق بالزر الثاني.
عند النقر فوق الزر الرابع، خصائص CSS border-width و width يتم تهيئة الصورة لقيمها الأصلية، التي تسترجع الصورة كما تم عرضها على الصفحة الأولى:

$('img').css({'border-width': '2px', width: '200'});

حالة قائمة الانتظار


عندما يتم ربط العديد من الرسوم المتحركة لنفس الكائن ، يتم وضعها في قائمة انتظار ، جاهزة لتنفيذ واحدة تلو الأخرى. لمعرفة حالة قائمة الانتظار لكائن معين ، سوف تقوم بتطبيق الطريقة queue() عليها دون أي وسائط. على سبيل المثال ، لمعرفة حالة قائمة الانتظار لعنصر معرف #monElement ، سنستخدم هذا الطود:

var resultat = $('#monElement').queue();
الوظيفة queue() ترجع جدولا. عدد الرسوم المتحركة التي يٌنتظر تنفيذها يساوي عدد العناصر في الجدول ، وبالتالي resultat.length .
لتوضيح هذه الطريقة ، سوف نعتمد على بضعة أسطر من كود jQuery . سنطبق رسمًا واحدًا أو أكثر على صورة ونختبر عدد الرسوم المتحركة التي تنتظر تنفيذها عن طريق النقر فوق زر. هنا هو الرمز المستخدم:

<button id="droite">يمين</button>
<button id="gauche">يسار</button>
<button id="bas">تحت</button>
<button id="haut">فوق</button>
<button id="etatFile"> حالة قائمة الانتظار</button><br />
<span id="infos"> أنقر على حالة قائمة الانتظار</span><br /><br />
<img src="logo.png" style="position: relative;">

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#droite').click( function() {
      $('img').animate({left: '+=50'}, 2000);
    });  
    $('#gauche').click( function() {
      $('img').animate({left: '-=50'}, 2000);
    });  
    $('#bas').click( function() {
      $('img').animate({top: '+=50'}, 2000);
    });  
    $('#haut').click( function() {
      $('img').animate({top: '-=50'}, 2000);
    });  
    $('#etatFile').click(function() {
      var n = $('img').queue();
      $('#infos').text(عدد الرسوم المتحركة في قائمة الانتظار : ' + n.length);
    });  
  });
</script>
جرب الكود
يحتوي المستند على خمسة أزرار وعلامة <span> وصورة موضوعة بالنسبة للصفحة بحيث يمكن نقلها بسهولة. تقليدية للغاية ، تطبق الأزرار الأربعة الأولى رسمًا متحركًا مدته ثانيتين على الصورة عن طريق تحريكه على التوالي إلى اليمين وإلى اليسار وإلى الأسفل وإلى الأعلى. على سبيل المثال ، عند النقر فوق الزر #haut ، يتم تشغيل التعليمات البرمجية التالية:

$('img').animate({top: '-=50'}, 2000);
سرعة الحركة طويلة طواعية. يتيح ذلك للمستخدم وضع رسوم متحركة متعددة في قائمة الانتظار.
عند النقر فوق الزر الخامس ، queue() يتم استدعاء الطريقة لمعرفة عدد الرسوم المتحركة في قائمة الانتظار. queue() يتم تخزين الكائن الذي يتم ارجاعه بواسطة الطريقة في المتغير n :

var n = $('img').queue();
بتطبيق وظيفة JavaScript lengthعلى هذا المتغير ، نحصل على عدد الرسوم المتحركة التي يٌنتظر تنفيذها. يتم عرض هذه المعلومات في العلامة <span> #infos :

$('#infos').text('Nombre d\'animations dans la file d\'attente : ' + n.length);

التغيير في قائمة الانتظار


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

<button id="ajouter">أضف صور متحركة</button>
<button id="annuler"> إلغاء قائمة الانتظار </button><br />
<button id="remplacer"> استبدال قائمة الانتظار </button>
<button id="retour"> إضافة وظيفة للعودة </button><br />
<img src="bon.gif" id="bon" style="position: relative;">
<img src="mauvais.gif" id="mauvais" style="position: relative;">

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#ajouter').click( function() {
      $('#bon').toggle(5000)
               .queue(function() { 
                 $('#mauvais').animate({left: '+=200'}, 'slow')
                 .animate({top: '+=200'}, 'slow')
                 .animate({left: '-=200'}, 'slow')
                 .animate({top: '-=200'}, 'slow');
               });
    });  
    $('#annuler').click( function() {
        $('img').clearQueue();
    });  
    $('#remplacer').click( function() {
      $('#mauvais').css('left', 200).css('top', 200);
      $('#mauvais').queue(function() {
                   $(this).animate({top: '-=200'}, 'slow')
                          .animate({top: '+=200', 'left': '-=200'}, 'slow')
                          .animate({top: '-=200'}, 'slow');
                   $(this).dequeue();
                   });
    });  
    $('#retour').click( function() {
      $('img').queue(function() {
            alert('Animation terminée.');
            $(this).dequeue();
       });
    });  
  });
</script>
عند النقر على الزر الأول ( #ajouter) ، يتم تطبيق الطريقة toggle على صورة المعرف #bon لجعلها تختفي أو تظهر ، اعتمادًا على ما إذا كانت مرئية أم لا:

$('#bon').toggle(5000)
عند اكتمال هذه الرسوم المتحركة الأولى (أي بعد 5 ثوانٍ) ، يتم وضع أربعة رسوم متحركة أخرى في قائمة الانتظار باستخدام الطريقة queue() :

.queue(function() { 
  $('#mauvais').animate({left: '+=200'}, 'slow')
  .animate({top: '+=200'}, 'slow')
  .animate({left: '-=200'}, 'slow')
  .animate({top: '-=200'}, 'slow');
   });
});
الكود المرتبط بزر الأمر الثاني بسيط للغاية: إنه يستدعي الطريقة فقط clearQueue() لمسح محتويات قائمة الانتظار:

$('#annuler').click( function() {
  $('img').clearQueue();
});
عند النقر فوق الزر الثالث ، يتم استدعاء الطريقة css() مرتين لنقل الصورة #mauvais إلى (200 ، 200) :

$('#mauvais').css('left', 200).css('top', 200);
يتم وضع رسم متحرك على الصورة #mauvais في قائمة الانتظار:

$('#mauvais').queue(function() {
  $(this).animate({top: '-=200'}, 'slow')
         .animate({top: '+=200', 'left': '-=200'}, 'slow')
         .animate({top: '-=200'}, 'slow');
عن طريق استدعاء الطريقة dequeue() ، يتم تشغيل هذه الرسوم المتحركة على الفور وإزالتها من قائمة الانتظار:

$(this).dequeue();
أخيرًا ، عند النقر فوق الزر الرابع ، تتم إضافة وظيفة إرجاع إلى قائمة الانتظار عبر الطريقة queue() . تعرض هذه الوظيفة مجرد مربع رسالة للإشارة إلى اكتمال الرسوم المتحركة:

$('img').queue(function() {
      alert('Animation terminée.');
      $(this).dequeue();
 });

كرر الرسوم المتحركة الى ما لا نهاية


جميع الرسوم المتحركة jQuery المقدمة حتى الآن تٌنفذ بعد طلب من المسنخدم مرة واحدة ثم تتوقف. ماذا عن تنفيذ الرسوم المتحركة في حلقة؟
يعتمد المبدأ على تعريف وظيفة JavaScript التي يتم فيها إستدعاء الطريقة animate() مرة او أكثر . يستخدم آخر هذه الاستدعاءات وظيفة العودة... نفس وظيفة JavaScript !
لتوضيح ملاحظاتي ، سنحرك باستمرار (الى ما لا نهاية) علامة <div> على مربع من 200 بكسل. هنا هو الكود المستخدم:

<style type="text/css">
  #balle {
    width: 10px;
    height: 10px;
    background-color: red;
    border: black 2px solid;
    border-radius: 10px;
    position: relative;
  }
</style>

<div id="balle"></div>

<script src="jquery.js"></script>
<script>
  $(function() {
    function bis() {
      $('#balle').animate({left: '+=200'}, 'slow')
                 .animate({top: '+=200'}, 'slow')
                 .animate({left: '-=200'}, 'slow')
                 .animate({top: '-=200'}, 'slow', bis);
    };
    bis();
  });
</script>
جرب الكود
يحتوي نص المستند على علامة بسيطة <div> معرفة #balle . تم تنسيق هذه العلامة بواسطة بعض تعليمات CSS . يتم تحديد الأبعاد ولون الخلفية والحدود ونوع الموضع.
تمثل الوظيفة bis() دورة الرسوم المتحركة للعلامة <div> . يتم تحويلها أولاً إلى اليمين بمقدار 200 بكسل في 200 مللي ثانية ، ثم إلى 200 بكسل في 200 مللي ثانية ، ثم إلى اليسار بمقدار 200 بكسل في 200 مللي ثانية وأخيراً للأعلى بمقدار 200 بكسل ، ولا تزال في 200 مللي ثانية:

$('#balle').animate({left: '+=200'}, 'slow')
           .animate({top: '+=200'}, 'slow')
           .animate({left: '-=200'}, 'slow')
           .animate({top: '-=200'}, 'slow', bis);
};
لاحظ المُدخل الأخير للأسلوب animate() . باستخدام وظيفة العودة bis() ، يتم بدء دورة رسوم متحركة جديدة.
لا يكفي تعريف الوظيفة bis() ليتم تنفيذها. لهذا السبب تُستدعى bis() لأول مرة ، قبل العلامة </script> مباشرة ، لبدء الرسوم المتحركة.

وقف واستئناف الرسوم المتحركة


تسمح لك الطريقة stop() بإيقاف الرسوم المتحركة. اعتمادًا على الإعدادات التي تم تمريرها إليها ، قد تقوم هذه الطريقة أولا بإزالة الرسوم المتحركة المعلقة و / أو عرض الحالة النهائية للرسوم المتحركة. هنا بناء الجملة:

$('sel').stop(efface, fin);
... حيث:
  • Sel هو محدد مسج
  • Efface هي قيمة منطقية تشير إلى ما إذا كانت الرسوم المتحركة التي تنتظر التنفيذ يجب إزالتها ( true) أم لا ( false) إزالتها من قائمة الانتظار ؛
  • Fin هي قيمة منطقية تشير إلى ما إذا كان يجب أن تأخذ الرسوم المتحركة حالتها النهائية ( true) أم لا ( false) . إذا لم يتم تحديد هذا المُدخل ، تظل الرسوم المتحركة في الحالة التي كانت عليها عندما توقفت.
في المثال التالي ، يتم تطبيق رسمين متحركين على صورة: التحول إلى اليمين والتحول إلى الأسفل. في أي وقت ، يمكن للمستخدم إيقاف الرسوم المتحركة الحالية بالنقر فوق زر أمر. ثلاثة أنواع من التوقف المقترحة:
  • إيقاف الرسوم المتحركة والتوقف في نهاية الرسوم المتحركة الحالية.
  • إيقاف الرسوم المتحركة الحالية ، وإلغاء الرسوم المتحركة المعلقة والانتقال إلى نهاية الرسوم المتحركة الحالية ؛
  • توقف بسيط للرسوم المتحركة.
زر آخر يسمح لاستئناف الرسوم المتحركة كما فتح الصفحة. هنا هو الرمز المستخدم:

<button id="stopFin">توقف و نهاية</button>
<button id="stopAnnuleFin">توقف , الغاء و نهاية</button>
<button id="stop">توقف</button>
<button id="reprise">إعادة تشغيل</button><br /><br />
<img src="image.png" style="position: relative;">

<script src="jquery.js"></script>
<script>
  $(function() {
    $('img').animate({left: '+=500'}, 2000).animate({top: '+=300'}, 2000);
    $('#stopFin').click( function() {
      $('img').stop(false, true);
    });  
    $('#stopAnnuleFin').click( function() {
      $('img').stop(true, true);
    });  
    $('#stop').click( function() {
      $('img').stop(true, false);
    });  
    $('#reprise').click( function() {
      $('img').css('left', 0).css('top', 0);
      $('img').animate({left: '+=500'}, 2000).animate({top: '+=300'}, 2000);
    });  
  });
</script>
بمجرد أن تصبح DOM جاهزة ، تكون الصورة متحركة:

$(function() {
    $('img').animate({left: '+=500'}, 2000).animate({top: '+=300'}, 2000);
يمكن للمستخدم بعد ذلك النقر على أحد الأزرار الثلاثة الأولى لإيقاف الرسوم المتحركة. يؤدي النقر فوق الزر الأول إلى إنهاء الحركة الحالية ، ولا يحذف الرسوم المتحركة في قائمة الانتظار (المُدخل الأول false ) ويضع الصورة في موضعها النهائي (المُدخل الثاني true ) :

$('#stopFin').click( function() {
  $('img').stop(false, true);
});
نقرة على الزر الثاني تنهي الرسوم المتحركة الحالية ، وتحذف الرسوم المتحركة في قائمة الانتظار (المُدخل الأول true ) وتضع الصورة في موضعها النهائي (المُدخل الثاني true ) :

$('#stopAnnuleFin').click( function() {
  $('img').stop(true, true);
});
أخيرًا ، يؤدي النقر فوق الزر الثالث إلى إنهاء الحركة الحالية وحذف الرسوم المتحركة في قائمة الانتظار (المُدخل الأول true ) وترك الصورة في موضعها الحالي (المُدخل الثاني false ) :

$('#stop').click( function() {
  $('img').stop(true, false);
});
دعونا نلقي نظرة على آخر طريقة. عندما ينقر المستخدم على الزر الرابع ، يتم تغيير موضع الصورة إلى موقعها الأصلي:

$('img').css('left', 0).css('top', 0);
... ويتم إعادة تشغيل الرسوم المتحركة التي تم تطبيقها عليه عند فتح الصفحة:

$('img').animate({left: '+=500'}, 2000).animate({top: '+=300'}, 2000);

إعداد جهاز توقيت


لقد رأيت في هذا الفصل أنه من الممكن تكرار سلسلة من الرسوم المتحركة عن طريق وضع جميع الرسوم المتحركة في دالة ، وباستخدام وظيفة التذكير الخاصة بالرسوم المتحركة الأخيرة لتنفيذ الوظيفة مرة أخرى. تقنية أخرى ممكنة. كنت أرغب في عرضها لك قبل الانتهاء من هذا الفصل ، لأنه سيكون بالتأكيد مفيدًا إذا كنت ترغب في إنشاء ألعاب أو مناطق متحركة على الويب. تتكون هذه التقنية من استخدام مؤقت JavaScript عبر الوظيفة setInterval() :

function nom() {
  // JavaScript / jQuery
}
setInterval(nom, period);
... حيث:
  • Nom هو اسم الوظيفة التي يجب تشغيلها بشكل دوري ؛
  • Period هي الفترة (أي ، الوقت) بين تنفيذين متتالين للتعليمات الواردة في الوظيفة.
ساعة أساسية
في هذا المثال الأول ، سوف ندرك ساعة رقمية أساسية باستخدام وظيفة JavaScript setInterval() . سيتم تحديث الوقت كل ثانية في علامة <span> باستخدام عبارة jQuery . هنا هو الرمز المستخدم:

<span id="heure"></span>

<script src="jquery.js"></script>
<script>
$(function() {
  function Horloge() {
    var laDate = new Date();
    var h = laDate.getHours() + ":" + laDate.getMinutes() + ":" + laDate.getSeconds();
    $('#heure').text(h);
  }
  setInterval(Horloge, 1000);
});
</script>
عند توفر DOM ، يتم تعريف الوظيفة Horloge() . بعد إنشاء الكائن Date ،يتم استرداد الساعات و الدقائق والثواني من خلال وظائف getHours() ، getMinutes() و getSeconds() ، وتخزينها في متغير h :

function Horloge() {
  var laDate = new Date();
  var h = laDate.getHours() + ":" + laDate.getMinutes() + ":" + laDate.getSeconds();
ثم يتم تحديث محتوى العلامة #heure <span> عن طريق عرض القيمة التي تم تخزينها للتو في المتغير h:

$('#heure').text(h);
لتشغيل الدالة Horloge()كل ثانية ، يكفي الآن استخدام الدالة setInterval() و تمرير القيمة Horloge في المُدخل الأول و 1000 في المُدخل الثاني:

setInterval(Horloge, 1000);
لا تضع اسم الوظيفة في علامات اقتباس ، ولا تجعلها تتبع قوسين فتح وإغلاق أو فاصلة منقوطة ، وإلا لن يتم استدعاء الوظيفة!
الرسوم المتحركة التي لا نهاية لها
يستخدم هذا المثال الثاني الرسوم المتحركة لقسم "تكرار الرسوم المتحركة التي لا تنتهي" وينفذها في حلقة مع الوظيفة setInterval() . هنا هو الكود المستخدم:

<!DOCTYPE html>
<style type="text/css">
  #balle {
    width: 10px;
    height: 10px;
    background-color: red;
    border: black 2px solid;
    border-radius : 10px;
    position: relative;
  }
</style>

<body>
  <div id="balle"></div>
  <script src="jquery.js"></script>
  <script>
    $(function() {
      function bis() {
        $('#balle').animate({left: '+=200'}, 'slow')
                   .animate({top: '+=200'}, 'slow')
                   .animate({left: '-=200'}, 'slow')
                   .animate({top: '-=200'}, 'slow');
      };
      setInterval(bis, 2400);
    });
  </script>
يحتوي نص المستند على علامة <div> معرفة #balle . عند توفر DOM ، يتم تعيين وظيفة JavaScript bis() . في هذه الوظيفة هي الرسوم المتحركة الأربعة التي تجعل الكرة ترسم المربع:

function bis() {
  $('#balle').animate({left: '+=200'}, 'slow')
             .animate({top: '+=200'}, 'slow')
             .animate({left: '-=200'}, 'slow')
             .animate({top: '-=200'}, 'slow');
};
إذا كنت تعتقد أنه لا يوجد شيء جديد في هذا الرمز ، فقم بإلقاء نظرة على الطريقة الأخيرة animate() : اختفت وظيفة رد الاتصال!
هذا أمر طبيعي تمامًا لأن التنفيذ المتكرر للوظيفة bis() لن يتم عن طريق وظيفة رد الاتصال الخاصة بالرسوم المتحركة الأخيرة ، ولكن عن طريق التعليمات setInterval() . هذا البيان يتبع الوظيفة bis() . تستدعي الوظيفة bis() كل 2400 ميلي ثانية:

setInterval(bis, 2400);
لماذا اخترت 2400 ميلي ثانية؟
فكر قليلاً ... القيمة slow ، التي تم تمريرها كالوسيطة الثانية للأساليب الأربعة animate، تتوافق مع مدة 600 مللي ثانية. بما أننا نقوم بأربع رسوم متحركة ، فلديك إجابتك.
  • الرسوم المتحركة JQuery غير متزامنة. إذا قمت بتشغيل رسوم متحركة متعددة ، فسيتم وضعها في قائمة انتظار. لا يمكن بدء الرسوم المتحركة nth إلا بعد انتهاء الصورة السابقة ... إلا إذا كنت تتصرف في قائمة الانتظار. لذلك ، سوف تستخدم بناء الجملة الثاني للأسلوب animate() لتشغيل العديد من الرسوم المتحركة في وقت واحد.
  • لمعرفة عدد الرسوم المتحركة الموجودة في قائمة الانتظار ، استخدم الطريقة queue() دون مدخلات واختبار خصائصها length .
  • يمكنك استخدام الطرق queue() ، dequeue() و clearQueue() للتحكم في قائمة الانتظار : queue() تضيف رسوما متحركة في قائمة الانتظار، dequeue() تنفذ وتزيل قائمة الانتظار ، clearQueue() تمسح محتويات قائمة الانتظار.
  • stop() تنهي الرسوم المتحركة الحالية. بناءً على الإعدادات التي تم تمريرها إليها ، يتم مسح الرسوم المتحركة التالية أو لا يتم محوها من قائمة الانتظار ويتم عرض الرسوم المتحركة في حالتها النهائية أو تتوقف ببساطة.
  • تسمح لك تقنيتان بتكرار سلسلة من الرسوم المتحركة التي لا تنتهي. بعد تضمين الرسوم المتحركة في إحدى الوظائف ، يمكنك:
    • استخدام وظيفة التذكير الخاصة بالرسوم المتحركة الأخيرة لاستدعاء الوظيفة ؛
    • استدعاء وظيفة عن طريق إعداد توقيت جافا سكريبت.