夏日博客

A-A+

javascript中setInterval与setTimeout用法介绍

2016年10月16日 前端设计 暂无评论 阅读 6 views 次

本文章来给各位朋友详细介绍关于setInterval与setTimeout用法介绍，有需要了解的朋友可参考参考。

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

clearInterval() 方法可以取消该周期性的方法调用。

当setInterval调用执行完毕时，它将返回一个timer ID，将来便可以利用该值对计时器进行访问，如果将该ID传递给clearInterval，便可以终止那段被调用的过程代码的执行了.

js setInterval()用法

倒计时实例,代码如下:

  1. <script language="javascript">  
  2. function timer(){  
  3. var value=Number(document.all['time'].value);  
  4. if(value==2){  
  5.      timeID=window.setInterval("change()",1000);  
  6. clearInterval(timeID);  
  7. }  
  8. else window.setInterval("change()",1000);  
  9. }  
  10. function change(){  
  11. var value=Number(document.all['time'].value);  
  12. if (value>1) document.all['time'].value=value-1;  
  13. else {  
  14.     document.all['time'].value="同意";  
  15. return false;  
  16. }  
  17. }  
  18. </script>  
  19.   
  20. <body onLoad="timer()">  
  21. <input name="time" value="10" type="button" style="width:40px;" />  
  22. </body>  

js clearInterval() 方法

setTimeout()在js类中的使用方法

setTimeout (表达式,延时时间)

setTimeout(表达式,交互时间)

延时时间/交互时间是以豪秒为单位的(1000ms=1s)

setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次,setTimeout 在执行时,它从载入后,每隔指定的时间就执行一次表达式.

1，基本用法,执行一段代码:

var i=0;

setTimeout("i+=1;alert(i)",1000);

执行一个函数：

var i=0;

setTimeout(function(){i+=1;alert(i);},1000);

注意比较上面的两种方法的不同,下面再来一个执行函数的,代码如下:

  1. var i=0;  
  2.  function test(){  
  3.      i+=1;  
  4.      alert(i);  
  5.  }  
  6.  setTimeout("test()",1000);  
  7.  //也可以这样：  
  8.  setTimeout(test,1000);  
  9.  //总结：  
  10. // setTimeout的原型是这样的：  
  11.  iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])  
  12.    
  13. //setTimeout有两种形式  
  14. setTimeout(code,interval)  
  15. setTimeout(func,interval,args)  

其中code是一个字符串,func是一个函数,注意"函数"的意义,是一个表达式,而不是一个语句,比如你想周期性执行一个函数,代码如下:

  1. var i=0;  
  2.  function test(){  
  3.      i+=1;  
  4.      alert(i);  
  5.  }  
  6.  setTimeout("test()",1000);  
  7.  //也可以这样：  
  8.  setTimeout(test,1000);  
  9.  //总结：  
  10. // setTimeout的原型是这样的：  
  11.  iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])  
  12.    
  13. //setTimeout有两种形式  
  14. setTimeout(code,interval)  
  15. setTimeout(func,interval,args)  

这里注意第二种形式中,是a,不要写成a(),切记!!!

setInterval、setTimeout不能传递带参数的函数的解决方案

在JS中无论是setTimeout还是setInterval，在使用函数名作为调用句柄时都不能带参数，而在许多场合必须要带参数,这就需要想方法解决。

一、采用字符串形式：——（缺陷）参数不能被周期性改变

setInterval("foo(id)",1000);

二、匿名函数包装,推荐,代码如下:

  1. window.setInterval(function()   
  2. {   
  3. foo (id);   
  4. }, 1000);  

这样就可以周期性执行foo（id）这个函数，而且把变量id传递进去；

三、定义返回无参函数的函数,代码如下:

  1. function foo(id)   
  2. {   
  3. alert(id);   
  4. }   
  5. function _foo(id)   
  6. {   
  7. return function()   
  8. {   
  9. foo(id);   
  10. }   
  11. }   
  12. window.setInterval(_foo(id),1000);  

这里定义了一个函数_foo，用于接收一个参数，并返回一个不带参数的函数，在这个函数内部使用了外部函数的参数，从而对其调用，不需要使用参数。

在 window. setInterval函数中，使用_foo(id)来返回一个不带参数的函数句柄，从而实现了参数传递的功能。

四、修改setInterval,代码如下:

  1. function foo(id)   
  2. {   
  3. alert(id);   
  4. }   
  5. var _sto = setInterval;   
  6. window.setInterval = function(callback,timeout,param)   
  7. {   
  8. var args = Array.prototype.slice.call(arguments,2);   
  9. var _cb = function()   
  10. {   
  11. callback.apply(null,args);   
  12. }   
  13. _sto(_cb,timeout);   
  14. }   
  15. window.setInterval(hello,3000,userName);  

以上的所有方法也适合setTimeout。

标签：

给我留言