您的位置:首页 > Web前端 > javascript > 正文

setTimeout和setIntelval的用法和区别

更多 时间:2013-11-14 类别:Web前端 浏览量:1667

setTimeout和setIntelval的用法和区别

setTimeout和setIntelval的用法和区别   setInterval定义和用法

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

 

语法

setInterval(code,millisec[,"lang"]) 

参数

code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。

 

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

 

setInterval实例

 

  •  
  • JScript 代码   复制
  • 
    
    <SCRIPT LANGUAGE="JavaScript">
    var timeid;
    function setTime(){
       var date=new Date();
       var h=date.getHours();
       var m=date.getMinutes();
       var s=date.getSeconds();
       document.getElementById("time").innerHTML=h+":"+m+":"+s;
    }
    timeid=setInterval("setTime()",1000);//他的调用在外部调用,而不是递归调用,表示每隔1s调用一次
    function stop(){
       clearInterval(timeid);
    }
    </SCRIPT>
    
    		
  •  

    setTimeout

     

  • 定义和用法:
  • setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。
  •  
  • 语法:
  • setTimeout(code,millisec)
  •  
  • 参数:
  • code (必需):要调用的函数后要执行的 JavaScript 代码串。   
  • millisec(必需):在执行代码前需等待的毫秒数。  
  •  
  • 提示:
  • setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
  •  
  •  
  •  
  • setTimeout实例
  •  
  •  
  • JScript 代码   复制
  • 
    <SCRIPT LANGUAGE="JavaScript">
    var timeid;
    function setTime(){
       var date=new Date();
       var h=date.getHours();
       var m=date.getMinutes();
       var s=date.getSeconds();
       document.getElementById("time").innerHTML=h+":"+m+":"+s;
       timeid=setTimeout("setTime()",1000);//递归调用,表示1s后执行一次
    }
    setTime();//页面加载后开始执行
    function stop(){
       clearTimeout(timeid);
    }
    </SCRIPT>
    
    			
  •  

    setTimeout和setIntelval的区别

    setTimeout:间隔一段时间后执行,只执行一次

    setInterval:每隔一段时间执行,执行多次

     

    如何停用计时器

    如果想停用setInterval可以调用clearInterval()方法,相对应的也有clearTimeout()这个方法,用于随时停止setTimeout,不过一般都用不到。

     

    clearInterval

    作用是清除对setInterval函数的调用

    语法格式

    clearInterval(intervalid);

    参数

    intervalid是调用setInterval函数后返回的对象。

     

    clearInterval实例

     

  •  
  • JScript 代码   复制
  • 
    function auto(){ 
    alert("到时间了") 
    } 
    var monitorInterval = null;  
    function setAuto(time,isFrist){ 
    var intervalTime=time; 
    if(isFrist!="1"){ 
    if(intervalTime!="off"){ 
    monitorInterval= setInterval("auto()", intervalTime*1000); 
    }else{ 
    if(monitorInterval){    
    clearInterval(monitorInterval); 
    monitorInterval = null; 
    } 
    } 
    } 
    } 
    
    		

  • 使用setTimeout的小技巧

     

    (1)IE中给setTimeout中的调用函数传参数
    上面的分析可知,IE是不支持在setTimeout中给被调用的函数传参数的,为了浏览器世界的和谐,我们可以把函数调用参数包裹进新的匿名函数中。示例:


    function f(a){
    alert(a);
    }
    // setTimeout(f,50,'hello'); //用于非IE
    setTimeout(function(){f('hello')},50); //通用
    var str='hello';
    setTimeout(function(){f(str)},50); //通用

     

    (2)this问题
    setTimeout调用的函数被执行时的上下文是全局,而不再是调用setTimeout方法时的上下文。所以,setTimeout的第一个参数的函数被执行时其this是指向window的,如果需要保留调用setTimeout方法时的this,就需要把当时的this传进去。示例:


    function Person(name){
    this.name=name;
    var f=function(){alert('My name is '+this.name)};

     

    // setTimeout(f,50); //错误

    var THIS=this;
    setTimeout(function(){f.apply(THIS)},50); //正确,通用
    setTimeout(function(){f.call(THIS)},50); //正确,通用
    }
    new Person('Jack');

     

    您可能感兴趣