Internet的基本結(jié)構(gòu)是建立在一系列靜態(tài)狀態(tài)上的,這些靜態(tài)狀態(tài)一般都稱做頁面。從第13章可以看到,DHTML打破了這個(gè)模型,為了響應(yīng)用戶的動(dòng)作,DHTML在相同的界面上創(chuàng)建了很多獨(dú)立的狀態(tài)。本章將就這種動(dòng)態(tài)理念進(jìn)行更深一步的探討。
有了JavaScript,網(wǎng)頁就可以不再是一堆離散狀態(tài)的集合,借助于時(shí)間(time)和動(dòng)作(motion),可以創(chuàng)建出真正的動(dòng)態(tài)頁面。對(duì)象可以隨著時(shí)間而改變,可以在頁面上順暢地運(yùn)動(dòng),而且用戶還可以像在實(shí)際生活中與事物進(jìn)行交互那樣對(duì)對(duì)象進(jìn)行操作。目前好多操作在桌面應(yīng)用程序中都已經(jīng)用濫了,如拖曳對(duì)象或者滑動(dòng)控件,這些都是很好的桌面應(yīng)用的例子,不過這些操作現(xiàn)在還沒有被集成到Web中去。
在接下來的方法中,大家可以學(xué)到在頁面上移動(dòng)對(duì)象所涉及的基本步驟,然后還可以應(yīng)用這些基本的知識(shí)來創(chuàng)建一個(gè)實(shí)時(shí)交互系統(tǒng),如滑動(dòng)控件和拖曳界面。
14.1 setTimeout和setInterval的使用
這兩個(gè)方法都可以用來實(shí)現(xiàn)在一個(gè)固定時(shí)間段之后去執(zhí)行JavaScript。不過兩者各有各的應(yīng)用場(chǎng)景。
方 法
實(shí)際上,setTimeout和setInterval的語法相同。它們都有兩個(gè)參數(shù),一個(gè)是將要執(zhí)行的代碼字符串,還有一個(gè)是以毫秒為單位的時(shí)間間隔,當(dāng)過了那個(gè)時(shí)間段之后就將執(zhí)行那段代碼。
不過這兩個(gè)函數(shù)還是有區(qū)別的,setInterval在執(zhí)行完一次代碼之后,經(jīng)過了那個(gè)固定的時(shí)間間隔,它還會(huì)自動(dòng)重復(fù)執(zhí)行代碼,而setTimeout只執(zhí)行一次那段代碼。
雖然表面上看來setTimeout只能應(yīng)用在on-off方式的動(dòng)作上,不過可以通過創(chuàng)建一個(gè)函數(shù)循環(huán)重復(fù)調(diào)用setTimeout,以實(shí)現(xiàn)重復(fù)的操作:
File: settimeout_setinterval.js
showTime();
function showTime()
{
var today = new Date();
alert("The time is: " + today.toString());
setTimeout("showTime()", 5000);
}
一旦調(diào)用了這個(gè)函數(shù),那么就會(huì)每隔5秒鐘就顯示一次時(shí)間。如果使用setInterval,則相應(yīng)的代碼如下所示:
File: settimeout_setinterval2.js
setInterval("showTime()", 5000);
function showTime()
{
var today = new Date();
alert("The time is: " + today.toString());
}
這兩種方法可能看起來非常像,而且顯示的結(jié)果也會(huì)很相似,不過兩者的最大區(qū)別就是,setTimeout方法不會(huì)每隔5秒鐘就執(zhí)行一次showTime函數(shù),它是在每次調(diào)用setTimeout后過5秒鐘再去執(zhí)行showTime函數(shù)。這意味著如果showTime函數(shù)的主體部分需要2秒鐘執(zhí)行完,那么整個(gè)函數(shù)則要每7秒鐘才執(zhí)行一次。而setInterval卻沒有被自己所調(diào)用的函數(shù)所束縛,它只是簡(jiǎn)單地每隔一定時(shí)間就重復(fù)執(zhí)行一次那個(gè)函數(shù)。
如果要求在每隔一個(gè)固定的時(shí)間間隔后就精確地執(zhí)行某動(dòng)作,那么最好使用setInterval,而如果不想由于連續(xù)調(diào)用產(chǎn)生互相干擾的問題,尤其是每次函數(shù)的調(diào)用需要繁重的計(jì)算以及很長的處理時(shí)間,那么最好使用setTimeout。