Javascript定時器(二)——setTimeout與setInterval

1、解釋說明

一、概述javascript

setTimeout:在指定的延遲時間以後調用一個函數或者執行一個代碼片斷java

setInterval:週期性地調用一個函數(function)或者執行一段代碼。

chrome

二、語法數組

setTimeout:瀏覽器

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
var timeoutID = window.setTimeout(code, delay);
  1. timeoutID 是該延時操做的數字ID, 此ID隨後能夠用來做爲window.clearTimeout方法的參數
  2. func 是你想要在delay毫秒以後執行的函數
  3. code 在第二種語法,是指你想要在delay毫秒以後執行的代碼
  4. delay 是延遲的毫秒數 (一秒等於1000毫秒),函數的調用會在該延遲以後發生.可是實際的延遲時間可能會稍長一點
  5. 標準瀏覽器與IE10支持第一種語法中向延遲函數傳遞額外參數的功能

 

setInterval閉包

var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
var intervalID = window.setInterval(code, delay);
  1. intervalID 是此重複操做的惟一辨識符,能夠做爲參數傳給clearInterval()。
  2. func 是你想要重複調用的函數。
  3. code 是另外一種語法的應用,是指你想要重複執行的一段字符串構成的代碼
  4. delay 是每次延遲的毫秒數 (一秒等於1000毫秒),函數的每次調用會在該延遲以後發生。和setTimeout同樣,實際的延遲時間可能會稍長一點。
  5. 標準瀏覽器與IE10支持第一種語法中向延遲函數傳遞額外參數的功能

  

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

  

簡單測試了下第五條,在個人電腦上面分別使用firefox與IE9測試,前者能夠順利彈出ok,後者彈出了undefined。app

 

2、「this」問題

由setTimeout()調用的代碼運行在與所在函數徹底分離的執行環境上. 這會致使,這些代碼中包含的 this 關鍵字會指向 window (全局對象)對象,這和所指望的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>

沒有被傳進去,分別用chrome,firefox和IE9實驗了下,都是這個結果。函數

解決方法一:測試

<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>

設置一個局部變量_this,而後放到setTimeout的函數變量中,timer執行call或apply,設置this值。

function可以調用局部變量_this,多虧了Javascript的閉包。裏面涉及了做用域鏈等知識,有興趣的能夠本身去了解下,這裏不展開了。

 

解決方法二:

這個方法有點高大上。自定義了setTimeout與setInterval。並且還擴展了低版本的IE瀏覽器,不支持向延遲函數傳遞額外參數的問題。

<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>

一、設置局部變量,賦值爲原生的setTimeout與setInterval

二、擴展setTimeout與setInterval,aArgs經過分割arguments這個變量,獲取到額外的參數數組

三、用vCallback instanceof Function判斷這是否是一個函數或代碼,若是是函數就用apply執行

四、setTimeout用call執行,設定this對象,以及其它的func、delay等參數

五、順便擴展setTimeout,IE低版本的瀏覽器也能執行額外參數

 

3、setTimeout與setInterval之間的一個區別

<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>

粗看上去,兩個功能是差很少的,可是裏面實際上是不同的。

setTimeout回調函數的執行和上一次執行之間的間隔至少有100ms(可能會更多,但不會少於100ms)

setInterval的回調函數將嘗試每隔100ms執行一次,不論上次是否執行完畢,時間間隔理論上是會<=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能夠查看到,時間間隔很不規則。

狀況大體是這樣的:因爲count函數的執行時間遠大於setInterval的定時間隔,那麼定時觸發線程就會源源不斷的產生異步定時事件,並放到任務隊列尾而無論它們是否已被處理,但一旦一個定時事件任務處理完,這些排列中的剩餘定時事件就依次不間斷的被執行。

 

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>    

 

demo下載:

http://download.csdn.net/download/loneleaf1/7961057

 

 

參考資料:

http://ejohn.org/blog/how-javascript-timers-work/  How JavaScript Timers Work

https://developer.mozilla.org/zh-CN/docs/DOM/window.setTimeout window.setTimeout

https://developer.mozilla.org/zh-CN/docs/Web/API/Window.setInterval Window.setInterval

http://heroicyang.com/2012/09/06/javascript-timers/ 理解JavaScript定時器:setTimeout和setInterval

相關文章
相關標籤/搜索