| 方法 | 說明 |
|---|---|
| setInterval() | 按照執行的週期（單位為毫秒）呼叫函數或計算表示式 |
| setTimeout() | 在指定的毫秒數後呼叫函數或計算表示式 |
| clearInterval() | 取消由 setInterval() 方法生成的定時器 |
| clearTimeout() | 取消由 setTimeout() 方法生成的定時器 |
var o = setTimeout(code, delay);
引數 code 表示要延遲執行的字串型程式碼，將在 Windows 環境中執行，如果包含多個語句，應該使用分號進行分隔。delay 表示延遲時間，以毫秒為單位。<p>段落文字</p>
<script>
var p = document.getElementsByTagName("p") [0];
p.onmouseover = function (i) {
setTimeout (function () {
console.log(p.tagName);
}, 500);
}
</script>
setTimeout() 方法的第一個引數雖然是字串，但是也可以是一個函數。一般建議把函數作為引數傳遞給 setTimeout() 方法，等待延遲呼叫。
var o = document.getElementsByTagName("body") [0].childNodes; //獲取body下所有子元素
for (var i = 0; i < o.length; i ++){ //遍歷元素集合
o[i].onmouseover = function (i) { //註冊滑鼠經過事件處理常式
return function () { //返回閉包函數
f (o[i]); //呼叫函數f，並傳遞當前物件參照
}
} (i); //呼叫函數並傳遞迴圈序號，實現在閉包中儲存物件序號值
}
function f (o) { //延遲處理常式
var out = setTimeout (function () {
console.log(o.tagName); //顯示當前元素的名稱
}, 500} //定義延遲半秒鐘後執行程式碼
}
這樣當滑鼠指標移過每個頁面元素時，都會在延遲半秒鐘後彈出一個提示對話方塊，提示元素名稱。
var o = document.getElementsByTagName("body") [0].childNodes;
for (var i = 0; i < o.length; i ++ ) {
o[i].onmouseover = function (i) { //為每個元素注冊滑鼠移過時事件延遲處理常式
return function () {
f (o[i]);
}
} (i);
o[i].onmouseover = function (i) { //為每個元素注冊滑鼠移出時清除延遲處理常式
return function () {
clearTimeout (o[i].out); //清除已註冊的延遲處理常式
}
} (i);
}
function f (o) { //把延遲處理定時器儲存在每個元素的 out 屬性中
o.out = setTimeout (function () {
nsole.log(o.tagName);
}, 500);
}
如果希望反復執行 setTimeout() 方法中包含的程式碼，可以在 setTimeout() 方法中包含對自身的呼叫，這樣就可以把自身註冊為可以被反復執行的方法。
<input type="text" />
<script>
var t = document.getElementsByTagName("input") [0];
var i = 1;
function f () {
var out = setTimeout( //定義延遲執行的方法
function () { //延遲執行函數
t.value = i ++; //遞加數位
f (); //呼叫包含setTimeout()方法的函數
}, 1000); //設定每秒執行一次呼叫
if (i > 10) { //如果超過10次，則清除執行，並彈出提示資訊
clearTimeout (out);
console.log("10秒鐘已到");
}
}
f(); //呼叫函數
</script>
var o = setInterval (code, interval)
該方法的用法與 setTimeout() 方法基本相同，其中引數 code 表示要週期執行的程式碼字串，引數 interval 表示週期執行的時間間隔，以毫秒為單位。var o = setInterval(functioin, interval[,arg1, arg2, ... argn])
<input type="text" />
<script>
var t = document.getElementByTagName("input") [0];
var i = 1;
var out = setInterval (f, 1000); //定義周期性執行的函數
function f () {
t.value = i ++;
if (i > 10) { //如果重複執行10次
clearTimeout (out); //則清除周期性呼叫函數
console.log("10秒鐘已到");
}
}
</script>
setTimeout() 方法主要用來延遲程式碼執行，而 setInterval() 方法主要實現週期性執行程式碼。它們都可以設計週期性動作，其中 setTimeout() 方法適合不定時執行某個動作，而 setInterval() 方法適合定時執行某個動作。