❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

جافاسكربتالمؤقتات

  • مفهوم المؤقت
  • طريقة إنشاء مؤقت
  • إنشاء مؤقت يتنفذ مرة واحدة
  • إنشاء مؤقت يتنفذ بشكل متكرر
  • إيقاف تنفيذ المؤقت

مفهوم المؤقت

المؤقت ( Timer ) هو دالة يتم تنفيذ أوامرها بعد إنقضاء مدة محددة، و يمكن أيضاً جعلها تتنفذ بصورة متكررة و إيقافها في أي وقت.

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

طريقة إنشاء مؤقت

يمكن إنشاء مؤقت زمني من خلال إستدعاء الدالة setTimeout() أو الدالة setInterval().
أي دالة من هذه الدوال فيها باراميترين، الأول يمثل دالة سيتم تنفيذ أوامرها و الثاني هو مدة الإنتظار حتى يتم تنفيذ الدالة.

مدة الإنتظار نضعها كرقم بالملي ثانية (Milliseconds)، أي كل 1000 تضعه يساوي ثانية واحدة.
فمثلاً لو وضعنا 2500 كمدة فهذا العدد يمثل 2.5 ثانية، أي ثانيتين و نصف.

إنشاء مؤقت يتنفذ مرة واحدة

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

في المثال التالي، استخدمنا الدالة setTimeout() لجعل الأمر الموضوع فيها يتنفذ بعد مرور 3 ثواني.

مثال

// سيتم تنفيذه بعد مرور 3 ثواني alert() الأمر
setTimeout(() => {
alert('Welcome to Harmash.com');
}, 3000);
// سيتم تنفيذه بعد مرور 3 ثواني alert() الأمر setTimeout(() => { alert('Welcome to Harmash.com'); }, 3000);
جرب الكود

إنشاء مؤقت يتنفذ بشكل متكرر

يمكنك استخدام الدالة setInterval() أو window.setInterval() لجعل الكود يعاد تنفيذه نفسه كلما إنقضت مدة معينة.

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

مثال

// clock في متغير إسمه clock يساوي id هنا قمنا بتخزين العنصر الذي يملك
let clock = document.querySelector('#clock');
// سيتم تنفيذه كلما مرت ثانية واحدة setInterval() الأمر الموضوع في الدالة
// كل ثانية clock أي سيتم عرض الوقت الحالي في جهاز المستخدم في العنصر
setInterval(() => {
clock.innerHTML = new Date().toLocaleTimeString();
}, 1000);
// clock في متغير إسمه clock يساوي id هنا قمنا بتخزين العنصر الذي يملك let clock = document.querySelector('#clock'); // سيتم تنفيذه كلما مرت ثانية واحدة setInterval() الأمر الموضوع في الدالة // كل ثانية clock أي سيتم عرض الوقت الحالي في جهاز المستخدم في العنصر setInterval(() => { clock.innerHTML = new Date().toLocaleTimeString(); }, 1000);
جرب الكود

في المثال السابق الدالة setInterval() ستظل تنفذ الأمر الموضوع فيها بلا توقف إلى حين أن يخرج المستخدم من الصفحة.

إيقاف تنفيذ المؤقت

عند استدعاء الدالة setTimeout() أو الدالة setInterval() فإنهما ترجعان عدد موحّد يشير إلى المؤقت الذي تم إنشاؤه في الصفحة.
ما يهمك من هذا الأمر أنه يمكنك إيقاف تنفيذ المؤقت من خلال العدد الذي يشير إليه.

أسلوب إيقاف التنفيذ هو نفسه في الحالتين، و لكن الدوال التي تستخدم للإيقاف تختلف أسماؤها فقط.


1- إيقاف تنفيذ أوامر الدالة setTimeout()

يمكنك استخدام الدالة clearTimeout() أو window.clearTimeout() لإلغاء تنفيذ أوامر المؤقت الذي تم إنشاؤه بواسطة الدالة setTimeout().
عند استدعائها يجب أن تمرر لها العدد الذي يشير إلى المؤشر حتى تقوم بإيقاف تنفيذه.

في المثال التالي، قمنا بإنشاء مؤقت يتنفذ مرة واحدة بعد مرور 5 ثواني.
الصفحة فيها زر لإيقاف المؤقت، إذا تم النقر عليه قبل مرور الخمس ثواني فإنه سيتم إيقاف المؤقت.

مثال

// timer قمنا بتخزينه في المتغير setTimeout() الرقم الذي ترجعه الدالة
let timer = setTimeout(() => {
alert('The timer has been executed!');
}, 5000);
// سيتم stopButton يساوي id هنا قلنا أنه عند النقر على العنصر الذي يملك
// timer إلغاء تنفيذ أوامر المؤقت الذي يشير إليه العدد المخزن في المتغير
document.querySelector('#stopButton').addEventListener('click', () => {
clearTimeout(timer);
});
// timer قمنا بتخزينه في المتغير setTimeout() الرقم الذي ترجعه الدالة let timer = setTimeout(() => { alert('The timer has been executed!'); }, 5000); // سيتم stopButton يساوي id هنا قلنا أنه عند النقر على العنصر الذي يملك // timer إلغاء تنفيذ أوامر المؤقت الذي يشير إليه العدد المخزن في المتغير document.querySelector('#stopButton').addEventListener('click', () => { clearTimeout(timer); });
جرب الكود

2- إيقاف تنفيذ أوامر الدالة setInterval()

يمكنك استخدام الدالة clearInterval() أو window.clearInterval() لإلغاء تنفيذ أوامر المؤقت الذي تم إنشاؤه بواسطة الدالة setInterval().
عند استدعائها يجب أن تمرر لها العدد الذي يشير إلى المؤشر حتى تقوم بإيقاف تنفيذه.

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

مثال

// clock في متغير إسمه clock يساوي id هنا قمنا بتخزين العنصر الذي يملك
let clock = document.querySelector('#clock');
// سيتم تنفيذه كلما مرت ثانية واحدة setInterval() الأمر الموضوع في الدالة
// timer قمنا بتخزينه في المتغير setInterval() الرقم الذي ترجعه الدالة
let timer = setInterval(() => {
clock.innerHTML = new Date().toLocaleTimeString();
}, 1000);
// سيتم stopButton يساوي id هنا قلنا أنه عند النقر على العنصر الذي يملك
// timer إلغاء تنفيذ أوامر المؤقت الذي يشير إليه العدد المخزن في المتغير
document.querySelector('#stopButton').addEventListener('click', () => {
clearInterval(timer);
});
// clock في متغير إسمه clock يساوي id هنا قمنا بتخزين العنصر الذي يملك let clock = document.querySelector('#clock'); // سيتم تنفيذه كلما مرت ثانية واحدة setInterval() الأمر الموضوع في الدالة // timer قمنا بتخزينه في المتغير setInterval() الرقم الذي ترجعه الدالة let timer = setInterval(() => { clock.innerHTML = new Date().toLocaleTimeString(); }, 1000); // سيتم stopButton يساوي id هنا قلنا أنه عند النقر على العنصر الذي يملك // timer إلغاء تنفيذ أوامر المؤقت الذي يشير إليه العدد المخزن في المتغير document.querySelector('#stopButton').addEventListener('click', () => { clearInterval(timer); });
جرب الكود
الدرس التالي❯ ❮الدرس السابق