?? day3_3.html
字號:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312-80">
<style type="text/css">
<!--
a:link { color: blue; text-decoration: none}
a:visited { color: purple; text-decoration: none}
a:hover { color: #CC0033; text-decoration: underline}
-->
</style>
<title>JavaScript高級教程</title>
<script language="JavaScript">
<!-- hide me
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);
}
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);
}
// show me -->
</script>
</head>
<body topmargin="1" leftmargin="2">
<table border="0" width="591" cellspacing="0">
<tr>
<td bgcolor="#ffff99" width="451">JavaScript高級教程 - 第三課</td>
</tr>
<tr>
<td bgcolor="#FF6600" width="451"><a href="mailto:thau@wired.com">Thau</a></td>
</tr>
</table>
<div align="left">
<table border="0" width="630" cellspacing="0">
<tr>
<td width="458" valign="top" align="left" rowspan="2"><small><small><br>
</small></small><strong>第三頁：<font size="3" face="宋體">定時循環的概念</font></strong>
<p>其制作方法就是讓按鈕的onClick事件調用以下函數：<big><br>
</big><br>
function ringBell()<br>
{<br>
var timer1 = setTimeout("window.document.the_form.the_text.value='3
seconds!';",3000);<br>
var timer2 = setTimeout("window.document.the_form.the_text.value='6
seconds!';",6000);<br>
var timer3 = setTimeout("window.document.the_form.the_text.value='9
seconds!';",9000);<br>
<br>
}<big><br>
<br>
<br>
</big><font size="3">它的意思是，“從現在開始，三秒鐘后顯示‘三秒’，六秒鐘<br>
后顯示‘六秒’，九秒鐘后顯示‘九秒’”，很好理解，對吧？</font></p>
<font size="3">
<p>但是，下面這樣卻不行：</p>
</font>
<blockquote>
<pre>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);
}
</pre>
</blockquote>
<form name="the_form">
<p><big>
<input name="the_text" size="20">
</big></p>
</form>
<p><font size="3">試一下這個錯誤的定時代碼看看會發生什么？<br>
<a href="backup/day3_3.htm#" onclick="doDumbTimer(); return false;">faulty
timer code</a>? </font></p>
<font size="3">
<p>請注意當你等了三秒鐘，三個定時信息之一神秘地出現在文<br>
本框里，然后就停在那兒。在上面的不好的代碼中，每個<br>
<tt>setTimeout</tt>都連續地執行，（就是“從現在開始，三秒鐘<br>
后顯示‘三秒’，三秒鐘后顯示‘六秒’，三秒鐘后顯示<br>
‘九秒’”）。所以當三秒鐘以后，三件事兒都發生了，你<br>
得到的正好是其中最后發生的結果----當然不是你希望的<br>
結果。</p>
<p>一旦你理解了，<tt>setTimeout()</tt>還是相當容易使用的。但是<br>
一個難點兒的問題提出來了：你如何去做一個定時器，讓某<br>
件事每隔2秒鐘就發生一次，從現在一直到永遠？象這個例<br>
子：<br>
</p>
<form name="timer_form">
<p>
<input onclick="doTimer();" type="button" value="start timer">
<input name="the_text" value="0" size="20">
<input onclick="clearTimeout(the_timeout);" type="button" value="stop timer">
</p>
</form>
<p>先別擔心停止定時器按鈕，稍后我會講<tt>clearTimeouts</tt>。只<br>
要想想你怎么能夠讓定時器無限循環。實際上這是一個非常<br>
重要的問題而不僅僅是一個小練習。就象我前邊提到的那樣，<br>
當你用動態HTML讓什么東西緩緩地在屏幕上移動時，就執行<br>
一個定時循環：“輕輕移動一點，等待，再移動一點，再等<br>
待.....如此這般”<br>
<br>
你想到這個問題了嗎？</p>
<p>好，答案并非那么簡單。你無法象上面的那個例子那樣，只<br>
用一個函數，就能夠每隔兩秒就改變文本框的內容，象這樣：<br>
<br>
function theTimer()<br>
{<br>
var timer1 = setTimeout("changeTextBoxTo(2);",2000);<br>
var timer2 = setTimeout("changeTextBoxTo(4);",4000);<br>
var timer3 = setTimeout("changeTextBoxTo(6);",6000);<br>
var timer4 = setTimeout("changeTextBoxTo(8);",8000);<br>
var timer5 = setTimeout("changeTextBoxTo(10);",10000);<br>
.<br>
.<br>
.<br>
<br>
}<br>
因為，好，你可以看出為什么不行：如果你想用這種方法讓<br>
某件事無限循環下去，你必須有無限多行的代碼。相比起其<br>
它問題，比如敲得你肩酸背痛來說，光是下載一個包含了無<br>
限多行javascript的頁面就需要太長的時間，所以，這種方<br>
法根本就談不上是一種選擇。<br>
<br>
這個也不行，雖然它看起來更酷一些：</p>
</font>
<p> </p>
<blockquote>
<pre><big>
</big>function theTimer()
{
the_time = 0;
hellIsHot = true;
while (hellIsHot == true)
{
the_time += 2;
var timer = setTimeout("changeTextBoxTo(the_time);", the_time*1000);
}
}
</pre>
</blockquote>
<p> </p>
<p> </p>
<p><font size="3">請把程序研究一會，看看會得到什么結果。但不要嘗試去運<br>
行它，否則結果會使你很不愉快。讓我們在“while"循環中<br>
走幾趟：</font>
<dl><font size="3">
<dt>第一遍</dt>
</font>
<dd>
<ul>
<li> <font size="3">while (hellIsHot == true) : 是的地獄還<br>
是熱的。</font><big><br>
</big></li>
<font size="3">
<li>the_time += 2 : 所以現在 the_time = 2 <br>
</li>
<li>var time = setTimeout("changeTextBoxTo(2);", 2000)
: <br>
所以, 從現在開始兩秒后, 文本框變成了“2.",這正是我們想要的結果。<br>
</li>
</font>
</ul>
</dd>
<font size="3">
<dt>第二遍</dt>
<dd>
<ul>
<li>while (hellIsHot == true) : 確實，地獄還是熱的. <br>
. </li>
<li>the_time += 2 : 所以現在 the_time = 4 <br>
</li>
<li>var time = setTimeout("changeTextBoxTo(4);", 4000)
: <br>
所以, 從現在開始四秒后, 文本框變成了“4.",很好。<br>
</li>
</ul>
</dd>
<dt>第三遍</dt>
<dd>
<ul>
<li>while (hellIsHot == true) : 不, 地獄一<br>
點也沒涼快. <br>
</li>
<li>the_time += 2 : 所以現在 the_time = 6 <br>
</li>
<li>var time = setTimeout("changeTextBoxTo(6);", 6000)
: <br>
所以, 從現在開始六秒后, <br>
文本框變成了“6.",好。<br>
</li>
</ul>
</dd>
<dt>第四遍</dt>
<dd>
<ul>
<li>while (hellIsHot == true) : 是的，還是<br>
熱的。<br>
</li>
<li>還那樣 </li>
<li>還那樣 </li>
</ul>
</dd>
</font></dl>
<p> <font size="3">你看明白了。這段代碼看起來象是做對了。不幸的是其實不<br>
是這樣。相反它創建了一個死循環，一直設定<tt>setTimeouts</tt><br>
直到地獄冷下來。這里有兩個問題。首先，當在循環里時，<br>
你的瀏覽器就無法做任何其它的事情，基本上就是停止，執<br>
行動作，再設定下一個定時器，一直到永遠。第二，每次設<br>
定<tt>setTimeout</tt></font><tt><font size="4">時，瀏覽器</font></tt><font size="3">
都要記住你預定執行的內容以及<br>
何時執行。最終你的瀏覽器會把內存耗盡，這時你的瀏覽器<br>
會崩潰，或者你的計算機會崩潰，<font face="宋體">或者把你弄瘋而永遠也不<br>
想再寫一行Javascript程序了。</font></font></p>
<font size="3">
<p>一點都不好</p>
<p>幸運的是，有一種方法能夠寫出成功的定時器循環。</p>
</font>
<p><a href="day3_4.html">>></a></p>
<p><font face="宋體" size="3" color="#000000"><strong>JavaScript高級教程</strong></font><font color="#FF0000" face="宋體" size="3"><br>
</font><font face="宋體"><font color="#FF0000">第一頁</font> <a href="day3_3.html">Javascript高級教程
- 第三課</a><br>
<font size="3"><font color="#FF0000">第二頁</font> <a href="day3_2.html">如何給事件定時</a><br>
<font color="#FF0000">第三頁</font> 定時循環的概念<br>
<font color="#FF0000">第四頁</font> <a href="day3_4.html">定時循環的做法</a><br>
<font color="#FF0000">第五頁</font> <a href="day3_5.html">一個Javascript編寫的時鐘</a><br>
<font color="#FF0000">第六頁</font> <a href="day3_6.html">給定時器加入變量</a><br>
<font color="#FF0000">第七頁</font> <a href="day3_7.html">識別用戶的瀏覽器</a><br>
<font color="#FF0000">第八頁</font> <a href="day3_8.html">如何識別用戶的瀏覽器</a><br>
<font color="#FF0000">第九頁</font> <a href="day3_9.html">對象和方法的識別</a><br>
<font color="#FF0000">第十頁</font> <a href="day3_10.html">History對象</a></font></font></p>
<p><font size="3">[<a href="day1_1.html">第1課</a>][<a href="day2_1.html">第2課</a>][第3課][<a href="day4_1.html">第4課</a>][<a href="day5_1.html">第5課</a>]</font></p>
<hr align="left">
<!--webbot bot="Include" U-Include="../../copyright.html" TAG="BODY" startspan -->
<p><font face="verdana, arial, geneva, sans-serif" size="2"><a href="http://phtshop.yeah.net" target="_top">本文根據
網猴 相關文章改編，版權歸原作者所有。</a> </font><font color="#000000"><span class="smallfont"></span></font></p>
<!--webbot bot="Include" endspan i-checksum="15926" --> </td>
</tr>
<tr> </tr>
</table>
</div>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -