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');
בדוגמא זו ראינו כיצד עוררנו את הפונקציה שהזנו כפרמטר ל-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 יש ללחוץ כאן.
