理解javascript定時(shí)器中的setTimeout與setInterval

更新時(shí)間：2016年02月23日 14:30:34 作者：咖啡機(jī)（K.F.J）

這篇文章主要幫助大家學(xué)習(xí)理解javascript定時(shí)器中的setTimeout與setInterval，從實(shí)例出發(fā)進(jìn)行深入探討，感興趣的小伙伴們可以參考一下

一、解釋說明

1、概述

setTimeout：在指定的延遲時(shí)間之后調(diào)用一個(gè)函數(shù)或者執(zhí)行一個(gè)代碼片段

setInterval：周期性地調(diào)用一個(gè)函數(shù)(function)或者執(zhí)行一段代碼。

2、語法

setTimeout：

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

timeoutID 是該延時(shí)操作的數(shù)字ID, 此ID隨后可以用來作為window.clearTimeout方法的參數(shù)
func 是你想要在delay毫秒之后執(zhí)行的函數(shù)
code 在第二種語法,是指你想要在delay毫秒之后執(zhí)行的代碼
delay 是延遲的毫秒數(shù) (一秒等于1000毫秒),函數(shù)的調(diào)用會(huì)在該延遲之后發(fā)生.但是實(shí)際的延遲時(shí)間可能會(huì)稍長(zhǎng)一點(diǎn)
標(biāo)準(zhǔn)瀏覽器與IE10支持第一種語法中向延遲函數(shù)傳遞額外參數(shù)的功能

setInterval

var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
var intervalID = window.setInterval(code, delay);

intervalID 是此重復(fù)操作的唯一辨識(shí)符，可以作為參數(shù)傳給clearInterval()。
func 是你想要重復(fù)調(diào)用的函數(shù)。
code 是另一種語法的應(yīng)用，是指你想要重復(fù)執(zhí)行的一段字符串構(gòu)成的代碼
delay 是每次延遲的毫秒數(shù) (一秒等于1000毫秒)，函數(shù)的每次調(diào)用會(huì)在該延遲之后發(fā)生。和setTimeout一樣，實(shí)際的延遲時(shí)間可能會(huì)稍長(zhǎng)一點(diǎn)。
標(biāo)準(zhǔn)瀏覽器與IE10支持第一種語法中向延遲函數(shù)傳遞額外參數(shù)的功能

<script type="text/javascript">
  setTimeout( function(param){ alert(param)} , 100, 'ok'); 
</script>

簡(jiǎn)單測(cè)試了下第五條，在我的電腦上面分別使用firefox與IE9測(cè)試，前者可以順利彈出ok，后者彈出了undefined。

二、“this”問題

由setTimeout()調(diào)用的代碼運(yùn)行在與所在函數(shù)完全分離的執(zhí)行環(huán)境上. 這會(huì)導(dǎo)致,這些代碼中包含的 this 關(guān)鍵字會(huì)指向 window (全局對(duì)象)對(duì)象,這和所期望的this的值是不一樣的。setInterval的情況類似。

<script type="text/javascript">
  //this指向window
  function shape(name) {
    this.name = name;
    this.timer = function(){alert('my shape is '+this.name)};
    setTimeout(this.timer, 50);
  }
  new shape('rectangle');
</script>

沒有被傳進(jìn)去，分別用chrome，firefox和IE9實(shí)驗(yàn)了下，都是這個(gè)結(jié)果。

解決方法一：

<script type="text/javascript">
    function shape(name) {
    this.name = name;
    this.timer = function(){alert('my shape is '+this.name)};
    var _this = this;
    setTimeout(function() {_this.timer.call(_this)}, 50);
  }
  new shape('rectangle');
</script>

設(shè)置一個(gè)局部變量_this，然后放到setTimeout的函數(shù)變量中，timer執(zhí)行call或apply，設(shè)置this值。

function能夠調(diào)用局部變量_this，多虧了Javascript的閉包。里面涉及了作用域鏈等知識(shí)，有興趣的可以自己去了解下，這里不展開了。

解決方法二：

這個(gè)方法有點(diǎn)高大上。自定義了setTimeout與setInterval。而且還擴(kuò)展了低版本的IE瀏覽器，不支持向延遲函數(shù)傳遞額外參數(shù)的問題。

<script type="text/javascript"> 
　　//自定義setTimeout與setInterval
  var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
 
  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
   var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
   return __nativeST__(vCallback instanceof Function ? function () {
    vCallback.apply(oThis, aArgs);
   } : vCallback, nDelay);
  };
   
  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
   var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
   return __nativeSI__(vCallback instanceof Function ? function () {
    vCallback.apply(oThis, aArgs);
   } : vCallback, nDelay);
  };
   
  function shape(name) {
    this.name = name;
    this.timer = function(other){
      alert('my shape is '+this.name);
      alert('extra param is '+ other);
    };
  }
  var rectangle = new shape('rectangle');

  setTimeout.call(rectangle, rectangle.timer, 50, 'other');
</script>

1、設(shè)置局部變量，賦值為原生的setTimeout與setInterval

2、擴(kuò)展setTimeout與setInterval，aArgs通過分割arguments這個(gè)變量，獲取到額外的參數(shù)數(shù)組

3、用vCallback instanceof Function判斷這是不是一個(gè)函數(shù)或代碼，如果是函數(shù)就用apply執(zhí)行

4、setTimeout用call執(zhí)行，設(shè)定this對(duì)象，以及其它的func、delay等參數(shù)

5、順便擴(kuò)展setTimeout，IE低版本的瀏覽器也能執(zhí)行額外參數(shù)

三、setTimeout與setInterval之間的一個(gè)區(qū)別

<script type="text/javascript">
 setTimeout(function(){
  /* Some long block of code... */
  setTimeout(arguments.callee, 100);
 }, 10);
 
 setInterval(function(){
  /* Some long block of code... */
 }, 100);
</script>

看上去，兩個(gè)功能是差不多的，但是里面其實(shí)是不一樣的。

setTimeout回調(diào)函數(shù)的執(zhí)行和上一次執(zhí)行之間的間隔至少有100ms（可能會(huì)更多，但不會(huì)少于100ms）

setInterval的回調(diào)函數(shù)將嘗試每隔100ms執(zhí)行一次，不論上次是否執(zhí)行完畢，時(shí)間間隔理論上是會(huì)<=delay的。

setInterval：

<script type="text/javascript">
    function sleep(ms) {
      var start = new Date();
      while (new Date() - start <= ms) {}
    }
    var endTime = null;
    var i = 0;
    
    setInterval(count, 100);
    function count() {
      var elapsedTime = endTime ? (new Date() - endTime) : 100;
      i++;
      console.log('current count: ' + i + '.' + 'elapsed time: ' + elapsedTime + 'ms');
      sleep(200);
      endTime = new Date();
    }
</script>

從firefox的firebug可以查看到，時(shí)間間隔很不規(guī)則。

情況大致是這樣的：由于count函數(shù)的執(zhí)行時(shí)間遠(yuǎn)大于setInterval的定時(shí)間隔，那么定時(shí)觸發(fā)線程就會(huì)源源不斷的產(chǎn)生異步定時(shí)事件，并放到任務(wù)隊(duì)列尾而不管它們是否已被處理，但一旦一個(gè)定時(shí)事件任務(wù)處理完，這些排列中的剩余定時(shí)事件就依次不間斷的被執(zhí)行。

setTimeout：

<script type="text/javascript">
    function sleep(ms) {
      var start = new Date();
      while (new Date() - start <= ms) {}
    }
    var endTime = null;
    var i = 0;
  　　setTimeout(count, 100);
    function count() {
      var elapsedTime = endTime ? (new Date() - endTime) : 100;
      i++;
      console.log('current count: ' + i + '.' + 'elapsed time: ' + elapsedTime + 'ms');
      sleep(200);
      endTime = new Date();
      setTimeout(count, 100);
    }
</script>