JavaScript進(jìn)階教程(第三課)
在Javascript給事件定時(shí)很容易。其關(guān)鍵指令是setTimeout()和clearTimeout()方法。利用setTimeout(), 指令可以在未來的某個(gè)指定時(shí)間執(zhí)行特定指令。如果你改變主意,你可以用clearTimeout()取消setTimeout的定時(shí).
下面是setTimeout的基本格式:
var the_timeout = setTimeout("some javascript statement", some_number_of_milliseconds);
在上面的例子中用到的指令如下:
var the_timeout = setTimeout("alertAndRedirect ();",3000);
該語(yǔ)句中有3項(xiàng)重要內(nèi)容:
setTimeout返回一個(gè)值。在該語(yǔ)句中the_timeout是一個(gè)變量,它指向特定的setTimeout。
如果你想取消該setTimeout的定時(shí),你只需引用該變量即可。你可以給變量起一個(gè)別的名稱。
在setTimeout中用到的第1個(gè)變量是一個(gè)JavaScript 語(yǔ)句的字符串。
在本例中第1個(gè)參數(shù)是字符串:"alertAndRedirect();"alertAndRedirect是為載入一個(gè)提示框而編寫的一個(gè)函數(shù),當(dāng)用戶點(diǎn)擊“OK”時(shí)還重新回到本頁(yè)面。
注意在引號(hào)中的內(nèi)容是一個(gè)完整的JavaScript語(yǔ)句,帶有分號(hào)和其他必須的語(yǔ)法. 如果你執(zhí)行該段代碼則會(huì)調(diào)用函數(shù)lertAndRedirect。setTimeout只規(guī)定了該語(yǔ)句出現(xiàn)的時(shí)間。
以下是函數(shù)alertAndRedirect()的代碼:
function alertAndRedirect()
{
alert('ok! exhale!');
window.location.replace("timing.htm");
}
setTimeout的第2個(gè)參數(shù)指定了在多少毫秒之后執(zhí)行第1個(gè)參數(shù)。一秒鐘等于1000毫秒。所以如果你想讓某事在3秒鐘之后發(fā)生你必須將第2個(gè)參數(shù)設(shè)置為3,000毫秒。
我們可以做下面的練習(xí)熟悉它的工作原理:
其制作方法就是讓按鈕的onClick事件調(diào)用以下函數(shù):
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);
}
它的意思是,“從現(xiàn)在開始,三秒鐘后顯示‘三秒',六秒鐘后顯示‘六秒',九秒鐘后顯示‘九秒'”,很好理解,對(duì)吧?
但是,下面這樣卻不行:
function doDumbTimer()
{
var timer1 = setTimeout("window.document.the_form_2.the_text_2.value='3 seconds!';",3000);
var timer2 = setTimeout("window.document.the_form_2.the_text_2.value='6 seconds!';",3000);
var timer3 = setTimeout("window.document.the_form_2.the_text_2.value='9 seconds!';",3000);
}
試一下這個(gè)錯(cuò)誤的定時(shí)代碼看看會(huì)發(fā)生什么?
請(qǐng)注意當(dāng)你等了三秒鐘,三個(gè)定時(shí)信息之一神秘地出現(xiàn)在文本框里,然后就停在那兒。在上面的不好的代碼中,每個(gè)setTimeout都連續(xù)地執(zhí)行,(就是“從現(xiàn)在開始,三秒鐘后顯示‘三秒',三秒鐘后顯示‘六秒',三秒鐘后顯示‘九秒'”)。所以當(dāng)三秒鐘以后,三件事兒都發(fā)生了,你得到的正好是其中最后發(fā)生的結(jié)果----當(dāng)然不是你希望的結(jié)果。
一旦你理解了,setTimeout()還是相當(dāng)容易使用的。但是一個(gè)難點(diǎn)兒的問題提出來了:你如何去做一個(gè)定時(shí)器,讓某件事每隔2秒鐘就發(fā)生一次,從現(xiàn)在一直到永遠(yuǎn)?象這個(gè)例子:
先別擔(dān)心停止定時(shí)器按鈕,稍后我會(huì)講clearTimeout。只要想想你怎么能夠讓定時(shí)器無限循環(huán)。實(shí)際上這是一個(gè)非常重要的問題而不僅僅是一個(gè)小練習(xí)。就象我前邊提到的那樣,當(dāng)你用動(dòng)態(tài)HTML讓什么東西緩緩地在屏幕上移動(dòng)時(shí),就執(zhí)行一個(gè)定時(shí)循環(huán):“輕輕移動(dòng)一點(diǎn),等待,再移動(dòng)一點(diǎn),再等待.....如此這般”
你想到這個(gè)問題了嗎?
好,答案并非那么簡(jiǎn)單。你無法象上面的那個(gè)例子那樣,只用一個(gè)函數(shù),就能夠每隔兩秒就改變文本框的內(nèi)容,象這樣:
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);
.
.
.
}
因?yàn)?,好,你可以看出為什么不行:如果你想用這種方法讓某件事無限循環(huán)下去,你必須有無限多行的代碼。相比起其它問題,比如敲得你肩酸背痛來說,光是下載一個(gè)包含了無限多行javascript的頁(yè)面就需要太長(zhǎng)的時(shí)間,所以,這種方法根本就談不上是一種選擇。
這個(gè)也不行,雖然它看起來更酷一些:
function theTimer()
{
the_time = 0;
hellIsHot = true;
while (hellIsHot == true)
{
the_time += 2;
var timer = setTimeout("changeTextBoxTo(the_time);", the_time*1000);
}
}
請(qǐng)把程序研究一會(huì),看看會(huì)得到什么結(jié)果。但不要嘗試去運(yùn)行它,否則結(jié)果會(huì)使你很不愉快。讓我們?cè)凇皐hile"循環(huán)中走幾趟:
第一遍
while (hellIsHot == true) : 是的地獄還是熱的。
the_time += 2 : 所以現(xiàn)在 the_time = 2
var time = setTimeout("changeTextBoxTo(2);", 2000) :
所以, 從現(xiàn)在開始兩秒后, 文本框變成了“2.",這正是我們想要的結(jié)果。
第二遍
while (hellIsHot == true) : 確實(shí),地獄還是熱的
the_time += 2 : 所以現(xiàn)在 the_time = 4
var time = setTimeout("changeTextBoxTo(4);", 4000) :
所以, 從現(xiàn)在開始四秒后, 文本框變成了“4.",很好。
第三遍
while (hellIsHot == true) : 不, 地獄一點(diǎn)也沒涼快.
the_time += 2 : 所以現(xiàn)在 the_time = 6
var time = setTimeout("changeTextBoxTo(6);", 6000) :
所以, 從現(xiàn)在開始六秒后, 文本框變成了“6.",好。
第四遍
while (hellIsHot == true) : 是的,還是熱的。
還那樣
還那樣
你看明白了。這段代碼看起來象是做對(duì)了。不幸的是其實(shí)不是這樣。相反它創(chuàng)建了一個(gè)死循環(huán),一直設(shè)定setTimeouts直到地獄冷下來。這里有兩個(gè)問題。首先,當(dāng)在循環(huán)里時(shí),你的瀏覽器就無法做任何其它的事情,基本上就是停止,執(zhí)行動(dòng)作,再設(shè)定下一個(gè)定時(shí)器,一直到永遠(yuǎn)。第二,每次設(shè)定setTimeout時(shí),瀏覽器 都要記住你預(yù)定執(zhí)行的內(nèi)容以及何時(shí)執(zhí)行。最終你的瀏覽器會(huì)把內(nèi)存耗盡,這時(shí)你的瀏覽器會(huì)崩潰,或者你的計(jì)算機(jī)會(huì)崩潰,或者把你弄瘋而永遠(yuǎn)也不想再寫一行Javascript程序了。
一點(diǎn)都不好
幸運(yùn)的是,有一種方法能夠?qū)懗龀晒Φ亩〞r(shí)器循環(huán)。下一講我們將要介紹這種方法
相關(guān)文章
解決 firefox 不支持 document.all的方法
解決 firefox 不支持 document.all的方法...2007-03-03實(shí)現(xiàn)前后端數(shù)據(jù)交互方法匯總
這篇文章給大家介紹幾種常用的前后端數(shù)據(jù)交互方法,并給出使用建議。以提高前后端協(xié)同開發(fā)的效率。非常的詳細(xì),推薦給小伙伴們,有需要的小伙伴可以參考下。2015-04-04JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三個(gè)函數(shù)的理解
以前一直會(huì)三個(gè)函數(shù)的使用產(chǎn)生混淆,現(xiàn)在通過對(duì)三個(gè)函數(shù)的原型定義的理解,其實(shí)很容易記住三個(gè)函數(shù)。2010-04-04Firefox window.close()的使用注意事項(xiàng)
window.close()在IE下可以執(zhí)行關(guān)閉,但在Firefox下不關(guān)閉,不是JS代碼window.close()的問題,而是Firefox的配置問題2009-04-04Javascript的時(shí)間戳和php的時(shí)間戳轉(zhuǎn)換注意事項(xiàng)
需要注意的是js的時(shí)間戳是13位,php的時(shí)間戳是10位,轉(zhuǎn)換函數(shù)如下,感興趣的朋友可以參考下哈2013-04-04