JavaScript

JavaScript Timing Events
تنفيذ أوامر برمجية بعد وقت محدد في لغة جافا سكريبت

سوف تتعلم في هذا الدرس تنفيذ أوامر برمجية بعد وقت محدد في لغة جافا سكريبت وتكرارة أيضاً عدد مرات محدودة أو غير محدودة وذلك بعد معرفة كلاً من دالة ()setTimeout ودالة ()setInterval.

التاريخ

27 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

1673

المواضيع

24
الشروحات chevron_left JavaScript Timing Events chevron_left JavaScript

JavaScript Timing Events
تنفيذ أوامر برمجية بعد وقت محدد في لغة جافا سكريبت

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> JavaScript Timing Events
تنفيذ أوامر برمجية بعد وقت محدد في لغة جافا سكريبت

في لغة جافا سكريبت يمكن التي تنفيذ جزء معين من التعليمات البرمجية بعد فترة زمنية معينة أو بشكل متكرر على فترات زمنية محددة.

عن طريق بعض الدوال وهي:
  • ()setTimeout هي دالة تسمح لك بتشغيل مجموعة أوامر برمجية مرة واحدة بعد فترة زمنية محددة (بالمللي ثانية).
  • ()setInterval. هي دالة تسمح لك بتشغيل مجموعة أوامر برمجية عدة مرات بشكل متكرر بعد فترة زمنية محددة (بالمللي ثانية).
  • ()clearTimeout هي دالة تقوم بإيقاف تنفيذ دالة ()setTimeout.
  • ()clearInterval هي دالة تقوم بإيقاف تنفيذ دالة ()setInterval.

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

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

</> JavaScript setTimeout Method
دالة setTimeout في لغة جافا سكريبت

تُستخدم دالة أو طريقة ()setTimeout في لغة جافا سكريبت لتنفيذ دالة أو كتلة تعليمات برمجية مرة واحدة فقط بعد فترة زمنية محددة.

JavaScript setTimeout Method syntax

طريقة كتابة دالة أو طريقة setTimeout في لغة جافا سكريبت.

window.setTimeout(function, milliseconds);

معطيات أو عوامل دالة ()setTimeout في لغة جافا سكريبت:

  • function العامل الأول هو دالة أو كتلة التعليمات البرمجية المراد تنفيذها.
  • milliseconds العامل الثاني هو الفاصل الزمني بالمللي ثانية الذي يجب بعده تنفيذ الدالة.


قيم دالة أو طريقة ()setTimeout في لغة جافا سكريبت:

  • intervalID ترجع طريقة ()setTimeout عدد صحيح موجب وهو القيمة الحالية لمرات التنفيذ.
JavaScript setTimeout Method

سوف يتم تنفيذ الدالة بعد ثلاث ثوان تبدأ من بعد النقر علي زر start في المثال التالي.

function start() {
  alert('CloseTag');
}

btn.addEventListener('click',()=>{
  setTimeout(start, 3000)
});
JavaScript setTimeout Method with intervalID

سوف يتم تنفيذ الدالة بعد ثلاث ثوان تبدأ من بعد النقر علي زر start في المثال التالي في كل مره يتم النقر علي زر start سوف يكون intervalID برقم مختلف وهو رقم مرة التكرار.

function start() {
  alert('CloseTag');
}

btn.addEventListener('click',()=>{
  let time = setTimeout(start, 3000)
  alert(time)
});
مهم
ملاحظة: طريقة setTimeout () مفيدة عندما تريد تنفيذ كتلة مرة واحدة تلو الأخرى. على سبيل المثال ، عرض رسالة لمستخدم بعد الوقت المحدد.

</> JavaScript setInterval Method
دالة setInterval في لغة جافا سكريبت

تُستخدم دالة أو طريقة ()setInterval في لغة جافا سكريبت لتنفيذ دالة أو كتلة تعليمات برمجية عدة مرات بعد فترة زمنية محددة.

JavaScript setInterval Method syntax

طريقة كتابة دالة أو طريقة setInterval في لغة جافا سكريبت.

window.setInterval(function, milliseconds);

معطيات أو عوامل دالة ()setInterval في لغة جافا سكريبت:

  • function العامل الأول هو دالة أو كتلة التعليمات البرمجية المراد تنفيذها.
  • milliseconds العامل الثاني هو الفاصل الزمني بالمللي ثانية الذي يجب بعده تنفيذ الدالة وتكرار تنفيذها بشكل متكرر بعد مرور هذا الوقت.


قيم دالة أو طريقة ()setInterval في لغة جافا سكريبت:

  • intervalID ترجع طريقة ()setTimeout عدد صحيح موجب وهو القيمة الحالية لمرات التنفيذ.
JavaScript setInterval Method

سوف يتم تنفيذ الدالة بعد ثلاث ثوان تبدأ من بعد النقر علي زر start في المثال التالي.

function start() {
  alert('CloseTag');
}

btn.addEventListener('click',()=>{
  setInterval(start, 3000)
});
JavaScript setInterval Method with intervalID

سوف يتم تنفيذ الدالة بعد ثلاث ثوان تبدأ من بعد النقر علي زر start في المثال التالي في كل مره intervalID يكون برقم مختلف وهو رقم مرة التكرار.

function start() {
  alert('CloseTag');
}

btn.addEventListener('click',()=>{
  setInterval(start, 3000)
});
مهم
ملاحظة: طريقة setTimeout () مفيدة عندما تريد تنفيذ كتلة مرة واحدة تلو الأخرى. على سبيل المثال ، عرض رسالة لمستخدم بعد الوقت المحدد.

</> Stop Timeout

ال clearTimeout() method تمنع تنفيذ الاوامر البرمجية التي توجد داخل الدالة التي تنفذ بعد فترة زمنية بداخل ال setTimeout()

تعمل دالة clearTimeout () في جافا سكريبت على مسح المهلة او الزمن الموقت التي تم تعيينها بواسطة وظيفة setTimeout () قبل ذلك.

Syntax
window.clearTimeout(timeoutVariable)

اذا لم تنفذ ال function  داخل ال setTimeout() يمكننا ايقاف تنفيذ الاوامر البرمجية قبل مرور الوقت المحدد

<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>

<button onclick="clearTimeout(myVar)">Stop it</button>

</> setInterval

ال setInterval() method تقوم بتكرار الدالة function مع مرور الفترة الزمنية المحددة بداخل setInterval 

تقوم دالة setInterval () ، المعروضة على واجهات Window and Worker ، باستدعاء دالة بشكل متكرر أو تنفيذ بعض الأكواد ، مع تأخير زمني ثابت بين كل مره. 

Result

A script on this page starts this clock:

يظهر الكود بهذا الشكل على المتصفح

ال window.setInterval() method يمكن ان تكتب بدون ال window prefix

  • ال parameter 1 هي الدالة function التي تحمل الاوامر البرمجية
  • ال parameter  2 هي الوقت المستغرق بين كل مره تنفذ فيها ال function 
var myVar = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات