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


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


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

שיעור 3

דף 3: לולאות תזמון – מהן?

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

function ringBell()
{
  var timer1 = setTimeout("window.document.the_form.the_text.value='3 seconds!';",3000);
  var timer2 = setTimeout("window.document.the_form.the_text.value='6 seconds!';",6000);
  var timer3 = setTimeout("window.document.the_form.the_text.value='9 seconds!';",9000);
}

כלומר, " כתוב '3 שניות' שלוש שניות מעכשיו, '6 שניות' שש שניות מעכשיו, ו'9 שניות' תשע שניות מעכשיו. הגיוני, נכון?

בכל אופן, הדוגמא הבאה לא עובדת:

function doDumbTimer()
{
  var timer1 = setTimeout("window.document.the_form.the_text.value='3 seconds!';",3000);
  var timer2 = setTimeout("window.document.the_form.the_text.value='6 seconds!';",3000);
  var timer3 = setTimeout("window.document.the_form.the_text.value='9 seconds!';",3000);
}

רואה מה קורה כאשר מנסים קוד מתזמן לקוי?

שים לב, כי אם אתה מחכה שלוש שניות, אחת מתוך שלושת הודעות התזמון מופיעה באופן מסתורי בתיבת הטקסט ופשוט נשארת שם. בקוד הלקוי למעלה, כל אחת מה- setTimeout מתבצעת ברציפות, (בדוגמא, היא אומרת, "כתוב '3 שניות' שלוש שניות מעכשיו, '6 שניות' שלוש שניות מעכשיו, ו-'9 שניות' שלוש שניות מעכשיו"). כך, לאחר שעברו שלוש שניות, כל שלושת הדברים קורים בבת אחת, ואתה לבסוף נשאר עם איזשהו הוראה שנסתיימה אחרונה – בהחלט לא מה שרצית.

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

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

האם אתה חושב על זה?

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

function theTimer()
{
  var timer1 = setTimeout("changeTextBoxTo(2);",2000);
  var timer2 = setTimeout("changeTextBoxTo(4);",4000);
  var timer3 = setTimeout("changeTextBoxTo(6);",6000);
  var timer4 = setTimeout("changeTextBoxTo(8);",8000);
  var timer5 = setTimeout("changeTextBoxTo(10);",10000);
  .
  .
  .
}

אתה יכול, אם כן, להבין מדוע לא: אם אתה רוצה שמשהו ירוץ בלולאה אינסופית, והשתמשת במתודה הזו, תאלץ שיהיו לך מס' אינסופי של שורות קוד. בין בעיות אחרות, כמו carpal tunnel syndrome רציני, ייקח זמן רב להוריד את העמוד עם מס' שורות אינסופי של JavaScript, לכן זוהי לא באמת אופציה.

גם הדוגמא הבאה לא תעבוד, למרות שהיא נראית די בסדר:

function theTimer()
{
  the_time = 0;
  hellIsHot = true;

  while (hellIsHot == true)
  {
    the_time += 2;
    var timer = setTimeout("changeTextBoxTo(the_time);", the_time*1000);
  }
}

למד זאת זמן מה, על מנת לראות למה אני חותר. אך אל תנסה להריץ את התכנית. התוצאות יעציבו אותך מאוד. הבה נעבור על מס' חזרות בלולאת ה-"while":

חזרה 1

while (hellIsHot == true)

כן, בהחלט חם בגיהנום.

the_time += 2;

ערך המשתנה the_time הוא: 2.

var time = setTimeout("changeTextBoxTo(2);", 2000);

כך, שתי שניות מעכשיו, תיבת הטקסט תשתנה ל- "2". וזה מה שאנו רוצים.

חזרה 2

while (hellIsHot == true)

כן, עדיין חם בגיהנום.

the_time += 2;

ערך המשתנה the_time הוא: 4.

var time = setTimeout("changeTextBoxTo(4);", 4000);

כך, ארבע שניות מעכשיו, תיבת הטקסט תשתנה ל- "4". טוב, זה בסדר.

חזרה 3

while (hellIsHot == true)

לא, הגיהנום לא נעשה קר יותר.

the_time += 2;

ערך המשתנה the_time הוא: 6.

var time = setTimeout("changeTextBoxTo(6);", 6000);

כך, שש שניות מעכשיו, תיבת הטקסט תשתנה ל-"6". יפה.

חזרה 4

while (hellIsHot == true)

טוב, טוב, הגיהנום חם!

וכן הלאה וכן הלאה וכן הלאה ...

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

לא טוב בכלל.

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

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

לדף הבא «--

 
       
       
   
 
 

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