javascript定時器詳解

JS定時器

定時器是javascript的重點部分，在以后的很多實戰項目里都會用到。

在javascript中，與定時器有關的方法是：

setInterval、clearInterval

以及

setTimeout、clearTimeout

這些方法都是定義在window對象上面的，因此我們寫window.setInterval和解setInterval的意思是一樣的，前面的window可以省略掉。

setInterval這個定時器的功能是每過一段時間，就把我們想要執行的函數放到js的執行隊列中等待執行。因為執行隊列不一定是空的，需要等執行隊列中的所有任務都執行完之后才會執行我們的函數，因此這個函數執行的時間也會有細微的差別。

這個方法的語法是：

window.setInterval(function () {}, 1000);

第一個參數是我們要執行的函數，第二個參數是每過多長時間把函數放入執行隊列。

這里要說明的是，第一個參數的那個函數，不能帶有參數。其次，里面的this默認指向window，因為前面提到過，誰調用方法，方法里面的this就指向誰，setInterval其實前面省略了window，因此里面的this默認一定指向window，不論這個setInterval是否是一個對象的方法。

setInterval其實很消耗內存，這個定時器一旦執行，就不會終止，因此需要我們的內核一直監聽這個函數。

這個時候我們就需要一個方法來清除定時器了：clearInterval。

定時器其實會返回一個標記，我們可以通過定時器的這個標記來清除掉相對應的定時器。

var i = 0;
  var timer = setInterval(function () {
        i++;
        if(i === 10) {
              clearInterval(timer);
        }
  }, 100);

 

JavaScript; “復制代碼”); “查看純文本代碼”); “返回代碼高亮”)

實際上，如果我們打印這個timer來看的話，它就是一個數字1，我們再開一個定時器，返回的就是2，也就是說，這個標記就是定時器的序號數，我們直接clearInterval(1);其實也可以清除掉第一個定時器，不過這里還是用標記來清除較好。

因此這里有一點需要特別強調：凡是寫定時器，一定要清除定時器！

好像有一次沒清除，電腦卡爆了！

還有一點需要注意的是，定時器是先等待再執行。

有時候我們只需要這個函數延遲一段時間執行，並不需要專門開啟一個定時器，這個時候就需要用到setTimeout了。

setTimeout是延遲執行的意思，語法和用法和setInterval一樣，只是這個方法只是把函數延遲一段時間之后執行一次而已。

同時它也有clearTimeout，當我們不想讓這個函數執行了，提前把它clear掉就可以了。

其實setInterval和setTimeout的第一個參數不一定非要是一個函數，它也可以是一串字符型的js代碼。

  setInterval(“console.log(1);”, 100);  

JavaScript; “復制代碼”); “查看純文本代碼”); “返回代碼高亮”)

這段代碼同樣可以執行，定時器每100ms給我們打印一個1。

通過這個特性，我們不一定要把函數寫在定時器里面，大部分時間我們都是在外部把函數定義好了，然后直接把函數名傳進去就可以了。

   function test () {} 2 setInterval(test, 1000);    

JavaScript; “復制代碼”); “查看純文本代碼”); “返回代碼高亮”)

那么這一次的知識點就這么多喲~