שיעור 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);
|