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。

定時器其實會返回一個標記，咱們能夠經過定時器的這個標記來清除掉相對應的定時器。

1 var i = 0;
2   var timer = setInterval(function () {
3         i++;
4         if(i === 10) {
5               clearInterval(timer);
6         }
7   }, 100);

 

JavaScript; 「複製代碼」); 「查看純文本代碼」); 「返回代碼高亮」)

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

所以這裏有一點須要特別強調：凡是寫定時器，必定要清除定時器！

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

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

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

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

同時它也有clearTimeout，當咱們不想讓這個函數執行了，提早把它clear掉就能夠了。

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

  1 setInterval(「console.log(1);」, 100);  

JavaScript; 「複製代碼」); 「查看純文本代碼」); 「返回代碼高亮」)

這段代碼一樣能夠執行，定時器每100ms給咱們打印一個1。

經過這個特性，咱們不必定要把函數寫在定時器裏面，大部分時間咱們都是在外部把函數定義好了，而後直接把函數名傳進去就能夠了。

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

JavaScript; 「複製代碼」); 「查看純文本代碼」); 「返回代碼高亮」)

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