JavaScript 使用定時器

■知識點

window對象包含4個定時器專用方法，使用它們可以實現(xiàn)代碼定時運行，或者延遲執(zhí)行，使用定時還可以設計演示動畫。

setTimeoutO方法能夠在指定的時間段后執(zhí)行特定代碼。其具體用法如下：

    var o = setTimeout( code, delay )

    參數(shù)code表示要延遲執(zhí)行的字符串型代碼，將在windows環(huán)境中執(zhí)行，如果包含多個語句，應該使用分號進行分隔。delay表示延遲時間，以毫秒（ms)為單位。

    該方法返回值是一個Timer ID，這個ID編號指向延遲執(zhí)行的代碼控制句柄。如果把這個句柄傳遞給clearTimeout()方法，則會取消代碼的延遲執(zhí)行。

    setlnterval()方法能夠周期性執(zhí)行指定的代碼，如果不加以處理，那么該方法將會被持續(xù)執(zhí)行，直到瀏覽器窗口關閉，或者跳轉到其他頁面為止。其具體用法如下：

    var o = setlnterval( code, interval )

    與setTimeoutO方法的用法基本相同，其中參數(shù)code表示要周期執(zhí)行的代碼字符串，參數(shù)interval表示周期執(zhí)行的時間間隔，以毫秒（ms)為單位。

    該方法返回值是一個Timer ID，這個ID編號指向對當前周期函數(shù)的執(zhí)行引用，利用該值對計時器進行訪問，如果把這個值傳遞給clearTimeoutO方法，則會強制取消周期性執(zhí)行的代碼。

    如果setlnterval()方法的第1個參數(shù)是一個函數(shù)，則setlnterval()方法可以接受任意多個參數(shù)，這些參數(shù)將作為該函數(shù)的參數(shù)使用。其具體用法如下：

    var o = setlnterval( function, interval[,argl,arg2,...argn])

■實例設計

【示例1】下面的示例演示了當光標移過段落文本時，會延遲半秒鐘彈出一個提示對話框，顯示當前元素的名稱。

<p>段落文本</p>

<script>

var p = document.getElementsByTagName(npn)[0]; 

p.onmouseover = function(i){ 

    setTimeout(function() {

        console.log(p.tagName)

    }, 500);

}

</script>

    setTimeoutO方法的第1個參數(shù)雖然是字符串，但是也可以是一個函數(shù)。一般建議把函數(shù)作為參數(shù)傳遞給setTimeout()方法，等待延遲調用。

【示例2】下面的示例演示了如何為集合中每個元素都綁定一個事件延遲處理函數(shù)。

var o = document.getElementsByTagName("body")[0].childNodes;      //獲取 body 下所有子兀素

for(var i = 0; i <o.length; i ++ ){ //遍歷元素集合

    o[i].onmouseover = function(i) {//注冊鼠標經過事件處理函數(shù)

        return function(){              //返回閉包函數(shù)

            f(o[i]);                               //調用函數(shù)f，并傳遞當前對象引用

        }

    }(i)；                                        //調用函數(shù)并傳遞循環(huán)序號，實現(xiàn)在閉包中存儲對象序號值

}

function f(o){                                  //延遲處理函數(shù)

    var out = setTimeout(function(){

        console.log (o.tagName) ;      //顯示當前元素的名稱

    }, 500);                                        //定義延遲半秒鐘后執(zhí)行代碼

}

這樣當光標移過每個頁面元素時，都會延遲半秒鐘后彈出一個提示對話框，提示元素名稱。