Javascript中setTimeOut和setInterval的定時器用法_javascript技巧

Javascript的setTimeOut和setInterval函數應用程式非常廣泛，它們都用來處理延時和定時任務，例如打開網頁一段時間後彈出一個登入框，頁面每隔一段時間發送非同步請求獲取最新資料等等。但它們的應用是有差別的。

setTimeout() 方法用於在指定的毫秒數後調用函數或計算表達式,而setInterval()則是在每隔指定的毫秒數循環調用函數或表達式，直到clearInterval把它清除。也就是說setTimeout()只執行一次，setInterval()可以執行多次。兩個函數的參數也相同，第一個參數是要執行的code或句柄，第二個是延遲的毫秒數。
setTimeOut用法
setTimeout函數的用法如下：

複製程式碼 程式碼如下:

var timeoutID = window.setTimeout(func, [delay, param1, param2, ...]);
var timeoutID = window.setTimeout(code, [delay]);

timeoutID：定時器ID號，它可以在clearTimeout()函數中被用來清除定時器。
func：被執行的函數。
code：（替代的語法）一個被執行的程式碼字串。
delay：延遲的時間，單位毫秒。如果沒有指定，預設為0。

我們可以使用window.setTimeout或setTimeout，兩個寫法基本上一樣，只不過window.setTimeout將setTimeout函數當作全域window物件的一個屬性來引用。

應用範例：

複製程式碼 程式碼如下:

function timeout(){
    document.getElementById('res').innerHTML=Math.floor(Math.random()*100 1);
}
setTimeout("timeout()",5000);

程式碼執行時，5秒後呼叫timeout()函數，點選看示範。
setInterval用法
setInterval函數的參數及用法和setTimeout函數一樣，請參考上文的setTimeout函數的用法介紹。不同的是，setInterval每隔一定的時間執行當中的func或code代碼。
應用範例：

複製程式碼 程式碼如下:

var tt = 10;
function timego(){
    tt--;
    document.getElementById("tt").innerHTML = tt;
    if(tt==0){ 
        window.location.href='/';
        return false;
    }
}
var timer = window.setInterval("timego()",1000);

函數timego()定義了頁面元素#tt顯示的內容，當tt等於0時，頁面導向首頁。然後我們定義一個定時器timer，使用setInterval()每隔1秒呼叫一次timego()。這樣timego會執行10次，每次數字tt會減1，直到0。那如果想停止定時器，可以使用以下程式碼：

複製程式碼 程式碼如下:

window.clearInterval(timer); 

程式碼執行時，10秒後頁面跳到首頁

其實setTimeout()也可以實作每隔一段時間重複執行某個函數，但我們還是簡單的差異使用setTimeOut和setInterval。另外javascript都是以單線程的方式運行於瀏覽器的javascript引擎中，實際應用中複雜的任務中需要排隊執行，這就可能導致定時器時間不準，這個問題在大型應用中需要考慮，本文不做深究。

以上所述就是本文的全部內容了，希望大家能夠喜歡。