定義

js中內置的一個方法，每隔一段時間或者延遲一段時間去執行一段指定的代碼

分類

• 重復執行定時器

setInterval();
作用：每隔一段時間去重復執行指定的函數（會執行函數多次）

• 延遲執行定時器

setTimeout();
作用：延遲一段時間去執行指定的函數（只執行函數一次）

語法

• 有兩個參數，兩個參數用“ , ”隔開

setInterval(function(),時間);

setTimeout(function(),時間);

• 前面一個參數為需要重復執行（延遲執行）的代碼
  • 可以直接將代碼寫在函數內

    var box=document.getElementById('box');
    var i=0;
    box.onclick=function(){
          setInterval(function(){
              i++;
              box.innerHTML=i;
          },1000);  
    }; 
  

  • 也可以將函數在代碼外聲明后進行調用

    var box=document.getElementById('box');
    var i=0;
    box.onclick=function(){
          setInterval(change,1000);
    }; 
    function change(){
        i++;
        box.innerHTML=i;
    };

注意：調用函數時，直接寫上函數名字即可，不用加()，若帶上()就為函數返回值了

• 后面一個參數為重復執行（延遲執行）代碼的間隔時間

  注意：
  1.時間單位為ms
  2.若未設置時間參數，則默認為10ms（來自于官方文檔）

調用

為了便于定時器的清除，一般是在函數外聲明一個變量，然后調用時將定時器賦值給該變量

var timer;
btn.onclick=function(){
    timer=setInterval();
};

定時器中的this

• this的指向

定時器是window中的一個方法，可以寫成window.setInterval()或者window.setTimeout()，故定時器中的this指向的是window

window.onload=function(){
    var box=document.getElementById('box');
    var i=0;
    console.log(this);          //window    這里是由window調用的函數，所以這里this為window
    box.onclick=function(){
        console.log(this);      //box       這里是由box點擊以后調用的函數，所以這里this為box
        setInterval(function(){
            console.log(this);  //window
            i++;
            box.innerHTML=i;
        },1000);  
    }; 
};

• 使用上級函數中的this

在調用定時器的函數里聲明一個變量a，然后將該函數里的this賦值給a，定時器中的函數如果需要運用到調用它的函數中的this，用a來代替

window.onload=function(){
    var box=document.getElementById('box');
    var i=0;
    box.onclick=function(){
        var  a=this;          //聲明變量a
        setInterval(function(){
            i++;
            a.innerHTML=i;    //在定時器所要觸發的函數中使用變量a，由于在自己的作用域里尋找不到，就會去它的上級里尋找a，找到a，那就是找到了上級函數的this
        },1000);  
    }; 
};

定時器返回值（定時器的編號）

定時器的返回值是數字，代表是第幾個定時器

注意：不同瀏覽器的返回值不同

var n=0;
function add(){
    n++;
};
console.log(setInterval(add,1000));      //在控制欄輸出定時器的返回值

清除定時器

• 原理

利用定時器的返回值去清除定時器

注意：
1.不同瀏覽器的定時器的返回值不同，存在兼容性問題，故不能直接用返回值去清除，需要將返回值存在變量里，然后用變量去清除定時器
2.定時器即使清除了，其返回值也不會清除，之后設置的定時器的返回值也會在其返回值的基礎上繼續向后排

• 方法

clearInterval(定時器的返回值);      //清除重復執行定時器
clearTimeout(定時器的返回值);       //清除延遲執行定時器

定時器的清除方法可以互用
clearInterval()可以用來清除setTimeout()
clearTimeout()可以用來清除setInterval()
只是一個小拓展，在清除定時器的時候還請一一對應

• 示例

  • 直接使用返回值（不推薦，存在兼容性問題）

var n=0;
function add(){
    n++;
    console.log(n);
    if(n==8){
        clearInterval(1);        //在chrome中，這個定時器的返回值為1，直接寫入返回值就可以清除，但不推薦這么做，因為存在兼容性問題
    }
};
setInterval(add,1000);

• 將返回值存在變量中（推薦做法）

var n=0;
function add(){
    n++;
    console.log(n);
    if(n==8){
        clearInterval(Timer);
    }
}
var Timer=setInterval(add,1000);
問題：
這里的定時器是在聲明的變量里，是如何調用的？
這里是將定時器的返回值賦值給了變量Timer，但是如果需要去獲取返回值，那么函數就需要被調用，所以這里的函數是被調用了的