מהו SetInterval ב- JavaScript ואיך זה עובד?

JavaScript משמש כשפת תכנות בצד הלקוח כמו גם כשפת תכנות בצד השרת. זהמספק שפע של שיטות למספר פונקציות לביצוע בקלות. זה מה שעשה אחת משפות התכנות הפופולריות ביותר וגם היא נמצאת בשימוש נרחב בכמה סוגים של פיתוח מוצרים.SetInterval ב- JavaScript הוא חלק מאירועי התזמון ב- JavaScript ונלמד עליו ברצף הבא:

• אירועי תזמון
• SetInterval ב- JavaScript
• כיצד לעצור את ההוצאה להורג?

אירועי תזמון

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

שתי השיטות העיקריות לשימוש באירועי תזמון ב- JavaScript הן:

• setTimeout (פונקציה, אלפית שנייה)

  
  
  

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

• setInterval (פונקציה, אלפית שנייה)

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

עכשיו בואו נמשיך ונראה איך עובד SetInterval ב- JavaScript.

SetInterval ב- JavaScript

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

var myVar = setInterval (myTimer, 1000) פונקציה myTimer () {var d = תאריך חדש () document.getElementById ('הדגמה'). innerHTML = d.toLocaleTimeString ()}

כאן, document.getElementById מקבל את האלמנט מ- אשר מזהה כ- 'demo' ופונקציה d.toLocaleTimeString () נותנים את הזמן הנוכחי מהמערכת.

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

אז איך נעצור את הביצוע הזה? בוא נגלה!

כיצד לעצור את ההוצאה להורג?

אנו יכולים לעצור את הביצוע מהפונקציה setInterval () בעזרת פונקציה אחרת הנקראת clearInterval ().clearInterval () משתמש במשתנה שהוחזר מהפונקציה setInterval ().

לדוגמה:

myVar = setInterval (פונקציה, אלפיות השנייה) clearInterval (myVar)

להלן דוגמה המשתמשת הן ב- setInterval () והן ב- clearInterval (). זה מפעיל שעון ומספק כפתור לעצירת הזמן.

מה זה חוט דמון

 
להלן שעון.
זמן עצירה 
 
לחץ על הלחצן למעלה כדי לעצור את הזמן.
var myVar = setInterval (myTimer, 1000) פונקציה myTimer () {var d = תאריך חדש () document.getElementById ('הדגמה'). innerHTML = d.toLocaleTimeString ()}

תְפוּקָה:

כמה דוגמאות נוספות עם setInterval () ו- clearInterval ().

יצירת סרגל התקדמות דינמי

#myProgress {רוחב: 100% גובה: מיקום 30 פיקסלים: צבע רקע יחסי: #ddd} #myBar {צבע רקע: # 4CAF50 רוחב: גובה 10 פיקסלים: מיקום 30 פיקסלים: מוחלט} 
לחץ על פונקציית move () {var elem = document.getElementById ('myBar') var width = 0 var id = setInterval (frame, 10) frame function () {if (width == 100) {clearInterval (id)} אחר {width ++ elem.style.width = width + '%'}}}

תְפוּקָה:

התפוקה הראשונית

פלט לאחר לחיצה על הכפתור שאומר 'לחץ עלי'.

איך הליהוק עובד בג'אווה

החלף בין שני רקעים

הפסק לעבור בין var myVar = setInterval (setColor, 300) פונקציית setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'צהוב'? 'ורוד': 'צהוב'} פונקציה stopColor () {clearInterval (myVar)}

תְפוּקָה:

הצבע יוחלף בין הצהוב לורוד. הפלט שלעיל הוא לפני לחיצה על הכפתור ולמטה לאחר לחיצה על הכפתור.

עם זאת, הגענו לסוף מאמר ה- SetInterval שלנו ב- JavaScript. אני מקווה שהבנת כיצד עובדת שיטת SetInterval.

בדוק את מאת אדוריקה. הדרכת הסמכת בניית אתרים תעזור לך ללמוד כיצד ליצור אתרים מרשימים באמצעות HTML5, CSS3, Twitter Bootstrap 3, jQuery ו- API של Google ולפרוס אותו לשירות אחסון פשוט של אמזון (S3).

יש לך שאלה עבורנו? אנא הזכיר זאת במדור התגובות בבלוג זה ונחזור אליך.