JavaScript 使用定時(shí)器

■知識(shí)點(diǎn)

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

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

    var o = setTimeout( code, delay )

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

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

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

    var o = setlnterval( code, interval )

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

    該方法返回值是一個(gè)Timer ID，這個(gè)ID編號(hào)指向?qū)Ξ?dāng)前周期函數(shù)的執(zhí)行引用，利用該值對(duì)計(jì)時(shí)器進(jìn)行訪問(wèn)，如果把這個(gè)值傳遞給clearTimeoutO方法，則會(huì)強(qiáng)制取消周期性執(zhí)行的代碼。

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

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

■實(shí)例設(shè)計(jì)

【示例1】下面的示例演示了當(dāng)光標(biāo)移過(guò)段落文本時(shí)，會(huì)延遲半秒鐘彈出一個(gè)提示對(duì)話框，顯示當(dāng)前元素的名稱。

<p>段落文本</p>

<script>

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

p.onmouseover = function(i){ 

    setTimeout(function() {

        console.log(p.tagName)

    }, 500);

}

</script>

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

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

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

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

    o[i].onmouseover = function(i) {//注冊(cè)鼠標(biāo)經(jīng)過(guò)事件處理函數(shù)

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

            f(o[i]);                               //調(diào)用函數(shù)f，并傳遞當(dāng)前對(duì)象引用

        }

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

}

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

    var out = setTimeout(function(){

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

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

}

這樣當(dāng)光標(biāo)移過(guò)每個(gè)頁(yè)面元素時(shí)，都會(huì)延遲半秒鐘后彈出一個(gè)提示對(duì)話框，提示元素名稱。