欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

理解javascript定時器中的setTimeout與setInterval

 更新時間:2016年02月23日 14:30:34   作者:咖啡機(K.F.J)  
這篇文章主要幫助大家學習理解javascript定時器中的setTimeout與setInterval,從實例出發(fā)進行深入探討,感興趣的小伙伴們可以參考一下

一、解釋說明

1、概述

setTimeout:在指定的延遲時間之后調用一個函數或者執(zhí)行一個代碼片段

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

2、語法

setTimeout:

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

setInterval

var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
var intervalID = window.setInterval(code, delay);
  • intervalID 是此重復操作的唯一辨識符,可以作為參數傳給clearInterval()。
  • func 是你想要重復調用的函數。
  • code 是另一種語法的應用,是指你想要重復執(zhí)行的一段字符串構成的代碼
  • delay 是每次延遲的毫秒數 (一秒等于1000毫秒),函數的每次調用會在該延遲之后發(fā)生。和setTimeout一樣,實際的延遲時間可能會稍長一點。
  • 標準瀏覽器與IE10支持第一種語法中向延遲函數傳遞額外參數的功能 
<script type="text/javascript">
  setTimeout( function(param){ alert(param)} , 100, 'ok'); 
</script> 

簡單測試了下第五條,在我的電腦上面分別使用firefox與IE9測試,前者可以順利彈出ok,后者彈出了undefined。

 二、“this”問題

由setTimeout()調用的代碼運行在與所在函數完全分離的執(zhí)行環(huán)境上. 這會導致,這些代碼中包含的 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執(zhí)行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>

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

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

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

4、setTimeout用call執(zhí)行,設定this對象,以及其它的func、delay等參數

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

 三、setTimeout與setInterval之間的一個區(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>

看上去,兩個功能是差不多的,但是里面其實是不一樣的。

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

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

情況大致是這樣的:由于count函數的執(zhí)行時間遠大于setInterval的定時間隔,那么定時觸發(fā)線程就會源源不斷的產生異步定時事件,并放到任務隊列尾而不管它們是否已被處理,但一旦一個定時事件任務處理完,這些排列中的剩余定時事件就依次不間斷的被執(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>  

以上就是本文的全部內容,希望對大家學習javascript定時器有所幫助。

相關文章

  • js下通過prototype擴展實現indexOf的代碼

    js下通過prototype擴展實現indexOf的代碼

    這里使用js prototype擴展實現的indexOf的實現代碼,跟js自帶的方法,差不多。
    2010-12-12
  • 快速實現JS圖片懶加載(可視區(qū)域加載)示例代碼

    快速實現JS圖片懶加載(可視區(qū)域加載)示例代碼

    目前很多網站,在圖片加載時均采用了一種名為懶加載的方式,具體表現為,當頁面被請求時,只加載可視區(qū)域的圖片,其它部分的圖片則不加載,只有這些圖片出現在可視區(qū)域時才會動態(tài)加載這些圖片,下面本文就介紹了JS圖片懶加載(可視區(qū)域加載)的實現方法,一起來看看吧。
    2017-01-01
  • js同時按下兩個方向鍵

    js同時按下兩個方向鍵

    本文通過實例代碼給大家介紹了js同時按下兩個方向鍵的實現方法,感興趣的朋友跟隨腳本之家小編一起看看吧
    2007-12-12
  • Express無法通過req.body獲取請求傳遞的數據解決方法

    Express無法通過req.body獲取請求傳遞的數據解決方法

    這篇文章主要為大家介紹了Express無法通過req.body獲取請求傳遞的數據解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-12-12
  • JS將秒換成時分秒實現代碼

    JS將秒換成時分秒實現代碼

    將秒換成時分秒的方法有很多,在本文將為大家介紹下,使用js的具體的實現思路,有需要的朋友可以參考下,希望對大家有所幫助
    2013-09-09
  • 使用Electron自制錄屏軟件

    使用Electron自制錄屏軟件

    錄屏軟件對于我們來說都不陌生了,本文我們要做的事情是實現自己的錄屏軟件,載體使用Electron,因為它更適合錄制桌面的場景,下面我們就來看看具體實現方法吧
    2024-01-01
  • JS實現類似百葉窗下拉菜單效果

    JS實現類似百葉窗下拉菜單效果

    百葉窗下拉菜單效果非常棒,今天小編給大家分享一段js代碼實現類似百葉窗下拉菜單效果,需要的朋友參考下
    2016-12-12
  • javascript使用activex控件的代碼

    javascript使用activex控件的代碼

    最近公司項目用到了avtivex控件。以前從來沒有用過。我把最近到處找到的使用方法整理一下。
    2011-01-01
  • js版掃雷實現代碼 原理不錯

    js版掃雷實現代碼 原理不錯

    前一段時間在圖書館看了本關于JavaScript的書,上面講怎樣用js編推箱子小游戲。我想,那掃雷也當然能編出來,然后就用DW試了試,結果如下。
    2009-11-11
  • JavaScript數組和對象的復制

    JavaScript數組和對象的復制

    本篇文章主要介紹了JavaScript數組和對象的復制的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-03-03

最新評論