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