JavaScript進(jìn)階教程(第三課第二部分)第1/2頁(yè)
要使定時(shí)器循環(huán)工作你需要寫(xiě)一個(gè)函數(shù)實(shí)現(xiàn)循環(huán)調(diào)用。這里是一個(gè)例子:
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);
}
這里用到的定時(shí)器就是上一頁(yè)所用的定時(shí)器。當(dāng)用戶(hù)點(diǎn)擊按鈕時(shí)就調(diào)用該函數(shù)。該函數(shù)將the_count的當(dāng)前值寫(xiě)到文字框中。然后the_count增加2,則開(kāi)始調(diào)用函數(shù)自身。文字框中的數(shù)值也相應(yīng)更新,the_count在增加2, 則再次調(diào)用函數(shù)自身。在等待的這兩秒期間瀏覽器則可以執(zhí)行其他的同步工作。the_count一增加2就執(zhí)行另一次setTimeout()。你不用擔(dān)心會(huì)造成內(nèi)存崩潰,因?yàn)樵诮o定時(shí)間內(nèi)只有一個(gè)setTimeout()在執(zhí)行。
而無(wú)限的"while" 循環(huán)則會(huì)鎖定瀏覽器的工作,在執(zhí)行該循環(huán)的過(guò)程中瀏覽器不能同時(shí)執(zhí)行別的任何指令。而setTimeout則可以使循環(huán)的間隙中讓瀏覽器執(zhí)行別的工作。
如何取消setTimeout?
現(xiàn)在你已經(jīng)學(xué)習(xí)了如何設(shè)置一個(gè)無(wú)限循環(huán)。但是你必須懂得如何終止循環(huán)。其指令就是clearTimeout。上例中定時(shí)器還有下面這個(gè)表單元素:
<input type="button" value="stop timer" onClick="clearTimeout(the_timeout);">
點(diǎn)擊這個(gè)按鈕就可以終止定時(shí)器。指令是clearTimeout(),其實(shí)很簡(jiǎn)單,如果你這樣設(shè)置setTimeout,the_timeout = setTimeout("some javascript",3000);
你可以這樣取消定時(shí)器:clearTimeout(the_timeout);
很簡(jiǎn)單,對(duì)吧?下面我們看一個(gè)復(fù)雜循環(huán)定時(shí)器,一個(gè)可以報(bào)告時(shí)間的定時(shí)器。
現(xiàn)在時(shí)間是:
點(diǎn)擊“啟動(dòng)時(shí)鐘”則時(shí)鐘開(kāi)始運(yùn)行。它從你的計(jì)算機(jī)中讀取時(shí)間并每半秒更新一次文字框中的顯示。這個(gè)例子通過(guò)一個(gè)自調(diào)用的函數(shù)設(shè)置了一個(gè)定時(shí)器。同時(shí)這個(gè)例子可以讓你了解一點(diǎn)Date對(duì)象的功能。當(dāng)講解cookies時(shí),我提到過(guò)Date對(duì)象。
以下是代碼:
function writeTime() {
// 獲得日期對(duì)象
var today = new Date();
// 從對(duì)象中獲得信息
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
// fixTime 使分和秒可以正常顯示
// 對(duì)于小于10的數(shù)字則在該數(shù)字前加一個(gè)0
minutes = fixTime(minutes);
seconds = fixTime(seconds);
//將時(shí)間字符串組合在一起并寫(xiě)出
var the_time = hours + ":" + minutes + ":" + seconds;
window.document.the_form.the_text.value = the_time;
//每半秒鐘執(zhí)行一次該函數(shù)
the_timeout= setTimeout('writeTime();',500);
}
function fixTime(the_time) {
if (the_time <10)
{
the_time = "0" + the_time;
}
return the_time;
}
我們仔細(xì)研究一下代碼。
var today = new Date();
正如new Array() 可以生成一個(gè)新的數(shù)組,你可以可以用new Date() 生成一個(gè)新的日期對(duì)象。生成對(duì)象之后,你可以對(duì)其提出你的問(wèn)題。你生成的新的日期對(duì)象的括號(hào)中間沒(méi)有任何參數(shù), 但JavaScript會(huì)查詢(xún)計(jì)算機(jī)的始終并用其生成新的日期對(duì)象?,F(xiàn)在我們的日期對(duì)象名為"today" ,我們可以從中提取相應(yīng)的信息。
var hours = today.getHours();
這條用于獲得當(dāng)前的小時(shí)值。它是軍隊(duì)格式的時(shí)間,即,如果當(dāng)前時(shí)間是下午兩點(diǎn),則它返回的值是14。getHours()是Javascript的日期對(duì)象內(nèi)置的方法調(diào)用。
var minutes = today.getMinutes(); var seconds = today.getSeconds();
這幾行原理和getHours()類(lèi)似。
minutes = fixTime(minutes);
getMinutes存在一些問(wèn)題,如果分鐘是11:01, getMinutes將返回 "1"。時(shí)鐘的顯示格式可不是這樣,它應(yīng)該顯示為“01”。fixTime函數(shù)就是用于執(zhí)行糾正顯示格式的功能。
下面兩行將字符串組合在一起并顯示出來(lái),
the_timeout = setTimeout('writeTime();', 500);
設(shè)置每半秒執(zhí)行一次該函數(shù)的循環(huán)。
下一講我們將學(xué)習(xí)如何在定時(shí)器中加入變量。
相關(guān)文章
Javascript排序算法之合并排序(歸并排序)的2個(gè)例子
這篇文章主要介紹了Javascript排序算法之合并排序(歸并排序)的2個(gè)例子,需要的朋友可以參考下2014-04-04實(shí)現(xiàn)前后端數(shù)據(jù)交互方法匯總
這篇文章給大家介紹幾種常用的前后端數(shù)據(jù)交互方法,并給出使用建議。以提高前后端協(xié)同開(kāi)發(fā)的效率。非常的詳細(xì),推薦給小伙伴們,有需要的小伙伴可以參考下。2015-04-04JavaScript 基礎(chǔ)篇之對(duì)象、數(shù)組使用介紹(三)
對(duì)象我們?cè)谇懊嬉埠?jiǎn)單介紹過(guò),它是一種將多個(gè)數(shù)據(jù)值集中在一個(gè)單元的東西,使用名字來(lái)存取,它是一個(gè)無(wú)序的屬性集合2012-04-04JavaScript的Set數(shù)據(jù)結(jié)構(gòu)詳解
這篇文章主要為大家介紹了JavaScript的Set數(shù)據(jù)結(jié)構(gòu),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-01-01JavaScript高級(jí)程序設(shè)計(jì)(第3版)學(xué)習(xí)筆記7 js函數(shù)(上)
如果說(shuō)對(duì)象是房間,那么函數(shù)就是有魔幻效應(yīng)的房間了。函數(shù)首先是對(duì)象,然后這個(gè)函數(shù)對(duì)象還具有很多魔幻功能2012-10-10每日十條JavaScript經(jīng)驗(yàn)技巧(一)
本文是每日十條JavaScript經(jīng)驗(yàn)技巧系列文章的第一篇,給大家匯總介紹一些在JavaScript使用過(guò)程中的注意事項(xiàng),非常的簡(jiǎn)單,都是個(gè)人在平時(shí)項(xiàng)目中的一點(diǎn)小小的總結(jié),希望對(duì)大家能夠有所幫助2016-06-06