Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

JavaScript – setTimeout & setInterval

setTimeout ו-setInterval הן מתודות שנועדו לתזמון, נוכל להשתמש בהן על מנת שנוכל לתזמן קריאה לפונקציה למשל, ועוד שימושים מבוססי תזמון

תארו לכם מצב שבו עלינו לתזמן יציאה לפועל של פונקציה.
בשפת JavaScript קיימות 2 מתודות שיכולות לסייע לנו בפעולות מסוג זה – setTimeout ו-setInterval.
במאמר זה נעבור על שתיהן ונבאר את אופן פעולתן.

setTimeout

setTimeout היא מתודה אשר מאפשרת לנו להריץ פונקציה לאחר אינטרוול הזמן.
במילים אחרות נוכל פשוט לומר שנשתמש בה כאשר אנו מעוניינים להריץ פונקציה לאחר פרק זמן מסוים.
פונקציה זו כוללת מספר העמסות:

setTimeout(function);
setTimeout(function, delay);

setTimeout(function, delay, param1);
setTimeout(function, delay, param1, param2);
setTimeout(function, delay, param1, param2,param3,etc…);

שימו לב כי הכוונה ב-3 ההעמסות הנוספת היא שנוכל לשלוח כמה פרמטרים נוספים שנרצה.

  • function – הפונקציה שברצוננו שתרוץ בחלוף הזמן.
  • delay – פרק הזמן שהרצת הפונקציה תתעכב, כלומר השהייה.
  • param – ארגומנטים נוספים שנרצה לשלוח לפונקציה.

 

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

var timeout = setTimeout(() => console.log('hello, world! 1'), 1000);
console.log('hello, world! 2');
console.log('hello, world! 3');
JavaScript - setTimeout
JavaScript – setTimeout

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

אנו מעוניינים שלאחר חלוף ההשהיה וריצת הפונקציה פעולה זו תחזור על עצמה שוב ושוב.
ובכן, נוכל ליצור התנהגות זו באמצעות setTimeout אם ממש נרצה, אך האמת שלשם כך יש לנו את setInterval.

setInterval

setInterval – מתודה זו מאפשרת לנו להריץ פונקציה לאחר אינטרוול הזמן, ולחזור על כך ברצף למשך אינטרוול זמן.
אמנם נשמע מבלבל ולא ברור, אך בואו נראה כיצד setInterval עובד.
ל-setInterval יש תחביר זהה לזה של setTimeout:

setInterval(function);
setInterval(function, delay);

setInterval(function, delay, param1);
setInterval(function, delay, param1, param2);
setInterval(function, delay, param1, param2,param3,etc…);

כלומר שגם כאן הכוונה היא שנוכל לשלוח כמה פרמטרים נוספים שנרצה.

  • function – הפונקציה שברצוננו שתרוץ בכל פרק זמן מוגדר (פרק הזמן מוגדר בפרמטר delay).
  • delay – זמן ההשהיה במילי-שניות שהרצת הפונקציה אמורה להתעכב בכל אינטרוול.
  • param – ארגומנטים נוספים שנרצה לשלוח לפונקציה.

*אם נרצה, נוכל להסיר setInterval על ידי שימוש ב-()clearInterval.

שימו לב ל-Code Snippet הבא שידגים את setInterval בפעולה:

var count = 0;

var intervalID = setInterval((myVar) => {
    console.log(count * myVar); 
    count < 10 ? count++ : clearInterval(intervalID); 
}, 500, '1');

בדוגמא זו הדפסנו מספר בכל אינטרוול שאורך כחצי שניה (500 מילי-שניות), כאשר הגענו ל-10 הסרנו את ה-setInterval.
כארגומנט נוסף שלחנו את הספרה 1, ובכל אינטרוול העלנו את ערכו של המשתנה count,
לאחר מכן הדפסנו את הערך ששלחנו כארגומנט פי ערכו של count:

כעת בואו נבחן מימוש מעט יותר מורכב של setInterval.

איך ליצור טיימר באמצעות שימוש ב-setInterval

במהלך לימודיי, באחד משיעורי JavaScript נתקלתי בבעיה יפה אשר לה נדגים פתרון אפשרי באמצעות setInterval.
נתבקשנו לקבל תאריך לידה מן המשתמש, ולחשב כמה זמן נשאר לו לחיות,
הנחת היסוד שבה השתמשנו היא שתוחלת החיים היא 100 כביכול לצורך התרגיל, נתבקשנו לציין שנים, חודשים וימים.
עד כאן כמובן שזוהי בעיה שניתן לפתור באמצעות שימוש באובייקט Date של JavaScript,
אך משום שרציתי להראות את זמן החיים שנותר כטיימר שסופר אחורה – השתמשתי ב-setInterval.

ראשית ניצור את קבצי ה-HTML ו-CSS שלנו:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8" />
</head>

<body>

    <div class="container">

        <form>
            <label for="date">Date Of Birth</label>
            <input id="date" type="date" name="date" min="1930-01-01" max="2022-01-01" required />
            <input type="button" id="btn" name="btn" value="click">

            <label>Timer</label>
            <div class="container2" name="container2">
                <input type="textarea" id="txt_years" name="txt_years">
                <input type="textarea" id="txt_days" name="txt_days">
            </div>

            <div class="container2">
                <input type="textarea" id="txt_hours" name="txt_hours">
                <input type="textarea" id="txt_minutes" name="txt_minutes">
                <input type="textarea" id="txt_seconds" name="txt_seconds">
            </div>
        </form>

    </div>
    
</body>

</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

body {
    font-family: Poppins, "Sans Serif";
    font-size: 46px;
    font-weight: bold;
    text-shadow: 1px 5px 9px rgb(71, 68, 68);
    color: rgb(39, 44, 42);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
	background-image: linear-gradient(to top left, #e2e2e2 , #f5f5f5);
}

#btn {
	font-family: Poppins, "Sans Serif";
	background-color: #3f87ca;
	color: #ffffff;
    width: 100%; 
    border-radius: 4px; 
	padding: 5px;
	margin: 5px;
	width: 28%;
    margin: 5%;
    font-size: 22px;
    border: 2px outset #ccc; 
}
#btn:hover {
	background-color: #3c3c3c;
}

.container {
    border-radius: 15px 0 15px 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: 3px 3px #cfcfcf;
	background-image: linear-gradient(to right bottom, #e2e2f2 , #f5f5f5);
}
.container2 {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-around;
}
.container form{
    margin: 5%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

input[type=date], input[type=textarea] {
    font-family: Poppins, "Sans Serif";
    margin-top: 5%;
    border: 2px inset #ccc; 
    border-radius: 4px; 
    border-color: beige;
    width: 50%;
    height: 46px;
    font-size: 28px;
  }

#txt_years, #txt_days, #txt_hours, #txt_minutes, #txt_seconds{
    border: 2px inset #ccc; 
    border-radius: 4px; 
    border-color: beige;
    align-items: center;
    height: 46px;
    width: 20%;
}
#txt_years, #txt_days {
    width: 40%;
}

כעת מה שנותר לנו זה ליצור את קוד ה-JavaScript שיבצע את החישוב ויחזיר לנו טיימר.
שימו לב לקטע הקוד הבא שיבצע זאת ומיד נבאר אותו:

const btn = document.querySelector("#btn");
const txt_years = document.querySelector("#txt_years");
const txt_days = document.querySelector("#txt_days");
const txt_hours = document.querySelector("#txt_hours");
const txt_minutes = document.querySelector("#txt_minutes");
const txt_seconds = document.querySelector("#txt_seconds");

btn.addEventListener("click", _ => {
    const today = new Date();
    const result = document.querySelector('input[type="date"]');
    validate(result, today)? countDown(today) : alert("please enter correct date");
});

function validate(result, today){
    const year = new Date(result.value).getFullYear();
    return date.value != "" && (year > 1930 && year < today.getFullYear()) ? true : false;
}

function countDown(date) {
    date.setFullYear(date.getFullYear() + 100);
    var countDownDate = date.getTime();

    var timer = setInterval(_ => {
        var now = new Date().getTime();
        var diffrence = countDownDate - now;

        var days = Math.floor(diffrence / (1000 * 60 * 60 * 24));
        var hours = Math.floor((diffrence % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((diffrence % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((diffrence % (1000 * 60)) / 1000);
        
        diffrence = Math.floor((countDownDate - now) / 86400000);

        var years = diffrence >= 365 ? years = Math.floor(diffrence / 365) : years = 0;

        txt_years.value = `years: ${years}`;
        txt_days.value = `days: ${days}`;
        txt_hours.value = `hours: ${hours}`;
        txt_minutes.value = `minutes: ${minutes}`;
        txt_seconds.value = `seconds: ${seconds}`;

        if (diffrence < 0) {
            clearInterval(timer);
            alert("the end");
        }
    }, 1000);
};

מה שעשינו כאן בעצם זה לקחת את התאריך שהוזן,
השתמשנו ב-EventListener על מנת להאזין לקליק על הכפתור,
ביצענו עליו ולידציה על מנת למנוע תקלות בחישוב,
ולבסוף נכנסנו לפונקציה שבתוכה הגדרנו את הטיימר שלנו (ה-setInterval).
ה-setInterval שהגדרנו עובד כך שהוא מחזיר בכל אינטרוול את הפרש הזמן בין אותו הרגע לבין סוף חייו של האדם בעל התאריך המוזן,
ולכן מה שיוצא לנו כאן זה טיימר, כי זמן ההשהיה שהגדרנו הוא שניה (1000 מילי-שניות),
כלומר שה-view יתעדכן בהפרש זמן חדש ורלוונטי שיוצג מחדש בכל שניה.
אם נריץ את התוכנית, נוכל לקבל את התוצאה הבאה:

לקריאה מורחבת על setInterval יש ללחוץ כאן.

רוצים לשתף את המדריך?

אהבתכם את המדריך? פתר לכם תקלה? הזמינו את כותב המדריך לכוס קפה

גולשים יקרים, רוב התכנים המוצגים באתר נכתבים בהתנדבות מלאה מתוך כוונה להנגיש מידע עבורכם. אם נתקלתם במדריך חינמי שפתר לכם תקלה או לימד אתכם משהו חדש שלא ידעתם, וברצונכם לתגמל את כותב המדריך או סתם להזמין אותו לכוס קפה, הינכם יותר ממוזמנים לתרום.

כתיבת תגובה

הזמינו אותי לכוס קפה
buy me coffee

אהבתכם את המדריך? פתר לכם תקלה? הזמינו את כותב המדריך לכוס קפה

גולשים יקרים, רוב התכנים המוצגים באתר נכתבים בהתנדבות מלאה מתוך כוונה להנגיש מידע עבורכם. אם נתקלתם במדריך חינמי שפתר לכם תקלה או לימד אתכם משהו חדש שלא ידעתם, וברצונכם לתגמל את כותב המדריך או סתם להזמין אותו לכוס קפה, הינכם יותר ממוזמנים לתרום.