הנך נמצא: מדריך מתקדם / שיעור 3 / דף 4
 


המדריך של תאו ל- JavaScript
 


דפים בשיעור זה:
1: JavaScript מתקדם
2: כיצד לתזמן אירועים
3: לולאות תזמון – מהן?
4: לולאות מתזמנות – איך?
5: שעון JavaScript
6: קוצבי זמן עם משתנים
7: הבחנה בין דפדפנים
8: הבחנה בין דפדפנים
9: אוביקט ומתודת הזיהוי
10: אובייקט ההיסטוריה
11: שעור 3 - חזרה
|
|
|
|
|
|
|
|
|
|
|
|

שיעור 3

דף 4: לולאות מתזמנות– איך ליצור אותן.

על מנת ליצור קוצב זמן העובד בלולאה, עליך לכתוב פונקציה אשר קוראת לעצמה. למרבה המזל, זה אפשרי ב- JavaScript. להלן דוגמא:

var the_count = 0;
var the_timeout;
function doTimer()
{
  window.document.timer_form.the_text.value = the_count;
  the_count += 2;
  the_timeout = setTimeout("doTimer();", 2000);
}

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

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

כיצד לבטל setTimeout?

כעת, שאתה יודע כיצד ליצור קוצב זמן העובד בלולאה אינסופית, בוודאי תרצה לדעת איך אפשר לעצור אותה. זהו הקסם של clearTimeout. אם תסתכל על קוד ה - HTML של המתזמן בעמוד הקודם, תראה את האלמנט הבא:

<input type="button" value="stop timer"
onClick="clearTimeout(the_timeout);">

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

the_timeout = setTimeout("some javascript",3000);

אתה יכול לבטל אותו כך:

clearTimeout(the_timeout);

פשוט, לא? כעת, נביט על מתזמן לולאתי קצת יותר מורכב: אחד שבאמת אומר זמן!

חזור לתחילת הדף

לדף הבא «--

 
       
       
   
 
 

עמוד ראשי
מדריך בסיסי
מדריך מתקדם
החלפת תמונות
גניבת קוד
מפת האתר