JS / المؤقتات

الناشر :كودا فوكس -

المؤقتات

مفهوم المؤقت

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

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

JS - المؤقتات


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

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

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

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

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript SetTimeout</h1>
    <p>The setTimeout() function will be executed once after 3 seconds.</p>
    
    <script>
        // سيتم تنفيذه بعد مرور 3 ثواني alert() الأمر
		setTimeout(() => {
			alert('Welcome to codafox.blogspot.com');
		}, 3000);
    </script>
</body>
</html>

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

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript setInterval</h1>
    <p>The setInterval() function will be executed again every second.</p>
    <p id="clock">Current time will be shown here</p>
    
    <script>
        // clock في متغير إسمه clock يساوي id هنا قمنا بتخزين العنصر الذي يملك
        let clock = document.querySelector('#clock');

        // سيتم تنفيذه كلما مرت ثانية واحدة setInterval() الأمر الموضوع في الدالة
        // كل ثانية clock أي سيتم عرض الوقت الحالي في جهاز المستخدم في العنصر 
        setInterval(() => {
            clock.innerHTML = new Date().toLocaleTimeString();
        }, 1000);
    </script>
</body>
</html>

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

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

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

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


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

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript clearTimeout</h1>
    <p>The clearTimeout() function can be used to stop the exection
        of the timer initialy created by setTimeout() function.</p>
    <button id="stopButton">Stop timer</button>
    
    <script>
        // timer قمنا بتخزينه في المتغير setTimeout() الرقم الذي ترجعه الدالة
        let timer = setTimeout(() => {
            alert('The timer has been executed!');
        }, 5000);
        
        // سيتم stopButton يساوي id هنا قلنا أنه عند النقر على العنصر الذي يملك
        // timer إلغاء تنفيذ أوامر المؤقت الذي يشير إليه العدد المخزن في المتغير
        document.querySelector('#stopButton').addEventListener('click', () => {
            clearTimeout(timer);
        });
    </script>
</body>
</html>

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

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript clearInterval</h1>
    <p>The clearInterval() function can be used to stop the exection
        of the timer initialy created by setInterval() function.</p>
    <p id="clock">Current time will be shown here</p>
    <button id="stopButton">Stop timer</button>
    
    <script>
        // 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);
        });
    </script>
</body>
</html>
التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال