DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> setInterval()與setTimeout()
setInterval()與setTimeout()
編輯:JavaScript基礎知識     
JS中的間歇調用setInterval()與超時調用setTimeout()相關總結

超時調用需要使用window.setTimeout(code,millisec)方法

它接受兩個參數:要執行的代碼和以毫秒表示的時間(即在執行代碼前需要等待多少毫秒)。其中第一個參數可以是一個包含JS代碼的字符串(就和在eval()函數中使用的字符串一樣),也可以是一個函數。第二個參數表示等待多長時間的毫秒數,但經過該事件後指定的代碼不一定會執行。

這是因為JS是一個單線程序的解釋器,一定時間內只能執行一段代碼,為了控制要執行的代碼就有一個JS任務隊列,這些任務會按照將他們添加到隊列的順序執行。

setTimeout()的第二個參數告訴JS再過多長時間把當前任務添加到隊列中。若隊列為空,這段添加的代碼會立即執行,若不為空,就要等前面的代碼執行完再執行。

//不建議傳遞字符串!可能會導致性能損失
setimeout("alert('hellow world!')",1000);
//推薦以匿名函數調用方式
var timeoutId = setTimeout(function(){
alert("hellow world!");
},1000);


clearTimeout(timeoutId);
  調用setTimeout()之後,該方法會返回一個數值ID,ID是計劃執行代碼的唯一標示符,可以通過clearTimeout(ID)來取消未執行的超時調用.

setTimeout() 只執行 code 一次。如果要多次調用,請使用 setInterval() 或者讓 code 自身再次調用 setTimeout()。

間歇調用的方法是setInterval(),接受的第一個參數是要調用的函數或要執行的代碼串。,第二個參數是周期性執行或調用 code 之間的時間間隔,以毫秒計。

調用setInterval()方法同樣會返回一個ID,該ID可用於在將來某個時刻取消間歇調用。取消間歇調用的重要性要遠遠高於取消超時調用,因為在不加干涉的情況下,間歇調用將會一直執行到頁面卸載。

var num = 0,
max = 10,
intervalId = null;
function incrementNumber(){
num++;
if(num = = max){
clearInterval(intervalId);
alert("Done");
}
}
//以函數名調用方式
intervalId = setInterval(incrementNumber,500);
  在開發環境中,很少使用真正的間歇調用,原因是後一個調用可能會在前一個調用結束之前啟動(設置的周期時間millisec過短或函數代碼code執行時間過長),所以最好不要使用間歇調用。

問題: JavaScript中setInterval傳參常見的問題(setInterval第一個參數加引號與不加引號區別)

function fun() {
console.log("1");
}
setInterval("fun()",1000);//全局作用域下正常執行
setInterval(fun(),1000); //調用函數正常,setInterval調用出錯
setInterval(fun,1000); //正確
setInterval(function(){ //匿名函數調用
console.log("1");
})
如例子中所示,setInterval 第一個參數 可以是函數名、匿名函數、函數的引用以及其他可執行代碼。

setInterval("fun()",1000)

這種加引號的方式就可以理解為 可執行代碼 就行eval() 一樣去執行第一個參數,就是對fun方法的調用 理所當然的彈出 1 一秒鐘間隔,一直執行。

setInterval(fun(),1000)

fun() 是對函數的直接調用,也就是說當setInterval還沒有開始函數fun就執行了。如果這個函數沒有返回值或者返回值不是可執行的函數或者其他的代碼的話,就以上代碼而言只是彈出一個1之後就停止了,這種方法無意義。

setInterval(fun,1000)

此時setInterval的第一個參數fun看作參數為 函數名或函數的引用。

我個人認為更推薦以匿名函數的方式調用最好。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved