JS中2種定時器的使用及清除的實現

Posted on by

一、什麼是定時器？

定時器就是由JS提供瞭一些原生方法來實現延時去執行某一段代碼。

二、定時器的分類

1、一次性定時器：

setTimeout： 設置一個定時器，在定時器到期後執行一次函數或代碼段

使用方法：var timer=setTimeout(fun,毫秒數)

清除的方法：clearTimeout(timeoutId)

//一次性
var timeoutId = window.setTimeout(fun[, delay, param1, param2, ...]);
var timeoutId = window.setTimeout(code[, delay]);
//timeoutId: 定時器ID
//fun: 延遲後執行的函數
//code: 延遲後執行的代碼字符串，不推薦使用原理類似eval()
//delay: 延遲的時間（單位：毫秒），默認值為0
//param1,param2: 向延遲函數傳遞而外的參數，IE9以上支持

2、周期性定時器：

setInterval: 以固定的時間間隔重復調用一個函數或者代碼段
使用方法：var timer=setInterval(fun,毫秒數)
清除的方法：clearInterval(timer)

//周期性
var intervalId = window.setInterval(fun, delay[, param1, param2, ...]);
var intervalId = window.setInterval(code, delay);
//intervalId: 重復操作的ID
//func: 延遲調用的函數
//code: 代碼段
//delay: 延遲時間，沒有默認值

三、清除定時器

由於定時器在調用時，都會返回一個整形的數字，該數字代表定時器的序號，即第多少個定時器，所以定時器的清除要借助於這個返回的數字。

要清除定時器，就必須在用定時器的時候，定義一個變量來記錄定時器的返回值。如下：

//setTimeout 1000ms後執行1次
var test1 = setTimeout(function(){
    //your codes
},1000);
 
//setInterval 每隔1000ms執行一次
var test2 = setInterval(function(){
   //your codes
},1000)
 
//清除Timeout的定時器,傳入變量名(創建Timeout定時器時定義的變量名)
clearTimeout(test1);
 
//清除Interval的定時器,傳入變量名(創建Interval定時器時定義的變量名)
clearInterval(test2);

註：有時候在寫的時候，還會習慣將清空的定時器的變量置空，這樣寫既可以釋放內存，也可以便於後邊代碼的判斷。

到此這篇關於JS中2種定時器的使用及清除的實現的文章就介紹到這瞭,更多相關JS 定時器內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：