הפונקציה ()setTimeout ב- JavaScript: דוגמאות קוד ושימושים

הפונקציה setTimeout() בג'אווה סקריפט משמשת לביצוע פונקציה לאחר השהייה (delay) מסוימת. היא מאפשרת לדחות את ביצוע הקוד, דבר שהופך אותה לשימושית עבור משימות כמו אנימציות, פעולות עתידיות, או אירועים מתוזמנים.

שימוש בסיסי ב- ()setTimeout

הפונקציה setTimeout() מקבלת שני פרמטרים: הפונקציה לביצוע והעיכוב במילישניות (milliseconds). התחביר של הפונקציה נראה כך:

setTimeout(function, delay);

הנה דוגמה:

setTimeout(function() {
    console.log('This message is displayed after 2 seconds');
}, 2000);

בדוגמה זו, ההודעה תודפס לקונסול לאחר השהייה של 2 שניות.

שימוש בפונקציות עם שם ב- ()setTimeout

ניתן גם להעביר פונקציה ל-setTimeout().

function showMessage() {
    console.log('This message is displayed after 3 seconds');
}
setTimeout(showMessage, 3000);

במקרה זה הפונקציה showMessage מתבצעת לאחר עיכוב של 3 שניות.

ביטול timeout עם ()clearTimeout

הפונקציה clearTimeout() משמשת לביטול timeout שנקבע קודם לכן על ידי setTimeout(). כאשר אתם קוראים ל-setTimeout(), היא מחזירה מזהה ייחודי עבור ה- timeout הספציפי הזה.

העברת מזהה זה ל-clearTimeout() מאפשרת לבטל את ביצוע הפונקציה שתוזמנה על ידי setTimeout().

let timeoutID = setTimeout(function() {
    console.log('This message will not be displayed');
}, 4000);

// ביטול ה-timeout
clearTimeout(timeoutID);

בדוגמה זו, ה- timeout מבוטל לפני שההודעה מוצגת, כך שההודעה לא תודפס בקונסול לעולם.

דוגמה חיה של ()setTimeout

הדוגמה החיה הבאה משתמשת ב-setTimeout() כדי להציג הודעה לאחר השהייה של 2 שניות כאשר לוחצים על כפתור "Start Timer".

אם לוחצים על כפתור "Cancel Timer" לפני שה- timeout מסתיים, הפונקציה clearTimeout() עוצרת את הטיימר, וההודעה "Timer canceled" תוצג במקום.

השתמשתי בקוד הבא כדי להשיג זאת:

HTML:

<button id="startButton">Start Timer</button>
<button id="cancelButton">Cancel Timer</button>
<div id="message"></div>

JavaScript:

document.addEventListener('DOMContentLoaded', () => {
    let timeoutID;
    const messageDiv = document.getElementById('message');
    const startButton = document.getElementById('startButton');

    startButton.addEventListener('click', () => {
        startButton.classList.add('active');
        timeoutID = setTimeout(() => {
            messageDiv.textContent = 'This message is displayed after 2 seconds';
            startButton.classList.remove('active');
        }, 2000);
    });

    document.getElementById('cancelButton').addEventListener('click', () => {
        clearTimeout(timeoutID);
        messageDiv.textContent = 'Timer canceled';
        startButton.classList.remove('active');
    });
});

סיכום

הפונקציה setTimeout() היא כלי מאד שימושי ב-JavaScript לתזמון פעולות. ההבנה כיצד להשתמש בפונקציה זו ביעילות יכולה לשפר את היכולת שלכם ליצור יישומים דינמיים ורספונסיביים יותר. בנוסף, הפונקציה clearTimeout() מספקת שליטה על פעולות אלה, ומאפשרת לכם לבטל אותן בעת הצורך.