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事件绑定带有参数的函数的时候须要使用匿名函数调用绑定函数的形式。

待续……

相关文章
相关标签/搜索