JavaScript中setTimeout和setInterval的使用

相同點:這兩個方法均可以用來實如今一個固定的時間以後去實現JavaScript代碼,兩個方法都包含有兩個參數,第一個是將要執行的代碼字符串,第二是以毫秒爲單位的時間間隔,當過了這個時間間隔以後就會執行第一個參數中的代碼字符串。app

不一樣點:setInterval在執行完一次代碼以後,通過了那個固定的時間間隔,它還會自動重複執行代碼。而setTimeout則僅僅是執行一次代碼。函數

使用定時器調用帶有參數的函數的時候直接爲該函數的參數賦值形式以下:prototype

1、採用字符串的形式:對象

一、window.setTimeout("alert('ok')",1000);事件

二、var msg="ok";ip

  window.setTimeout("alertMsg(msg)",1000);作用域

  function alertMsg(pmsg)字符串

  {get

    alert(pmsg);io

  }

當咱們調用的函數中含有定時器,而且須要經過該函數爲定時器進行傳值的時候該怎麼辦呢?這時咱們須要使用相似如下形式的代碼方能將參數傳遞給定時器。

function interval(msg)

{

  setInterval("tip('"+msg+"')",1000);

}

function tip(msg)

{

  alert(msg);

}

window.onload=function(){

  var btnClick=document.getElementById("btnClick");

  btnClick.onclick=function(){

  interval("帶有參數的定時器的使用");

  }

}

此上兩種方法用於傳遞字符串,沒法用於傳遞對象。

2、採用匿名函數的形式:

setInterval(function(){resize(currentObj,nexObj);},2000);

resize(currentObj,nextObj){}

以上示例對於在傳遞的參數是對象的時候使用。

3、在有些狀況下需在循環中使用,如:
window.onload=function(){
       var a=[{id:1},{id:2},{id:3},{id:4}];
       for(var i=0;i<3;i++){          
    setTimeout(function(){start(a[i])},1000);
       }
}
function start(obj){ alert(obj.id);}
輸出的結果都爲 4。由於在一個函數體中,a和i相對於匿名函數是全局的,循環執行完後i=3,都執行start(a[3]),因此輸出結果相同。這種狀況怎麼解決呢,只需把setTimeout封裝到一個函數中便可
window.onload=function(){      
var a=[{id:1},{id:2},{id:3},{id:4}];
       for(var i=0;i<3;i++){
            set(a[i]);
       }
}
function set(obj){ 

  setTimeout(function(){start(obj)},1000);  
}
obj和匿名函數在同一做用域,因此在匿名函數中能夠直接訪問obj,並且每次執行setTimeout時都會產生新的匿名函數體和做用域,因此定時執行匿名函數時調用start並傳值就不會出問題了。(此爲我的的理解,不必定正確)
function
start(obj){ alert(obj.id);}
在網上看到有人封裝了一個函數,也可實現該功能
var util={
  setTimeout:function(fun, delay) {
      if(typeof fun == 'function'){
      var argu = Array.prototype.slice.call(arguments,2);
      var f = (function(){     
    fun.apply(null, argu);
      });
      return window.setTimeout(f, delay);
      }
      return
      window.setTimeout(fun,delay);
   }
}
window.onload=function(){      
       var a=[{id:1},{id:2},{id:3},{id:4}];
       for(var i=0;i<3;i++){
             util.setTimeout(start,1000,a[i]);
       }
}

注意:一、這裏函數中的參數在定義的時候不能使用var關鍵字。

     二、在爲onclick事件綁定帶有參數的函數的時候須要使用匿名函數調用綁定函數的形式。

待續……

相關文章
相關標籤/搜索