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

مفهوم المؤقت

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

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

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

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

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

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

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

// سيتم تنفيذه بعد مرور 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);

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

عند استدعاء الدالة 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);
});

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);
});