夏日博客

A-A+

js中SetInterval与setTimeout延时方法

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

我们经常在看到有些网站的广告都是过一会才加载的，其实这个就是一个简单的延时处理了，在js中实现延时我们可以使用SetInterval与setTimeout方法来实现，具体给大家实例证明。

JS手册»setTimeout() : 用于在指定的毫秒数后调用函数或计算表达式;

英文释义»timeout() : 超时；暂时休息；工间休息;

JS手册»setInterval() : 按照指定的周期(以毫秒计)来调用函数或计算表达式. 会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭;

英文释义»interval() : 间隔；间距；幕间休息;

不难看出, 只要我们仔细体会JS手册及命名释义, 就能很容易的区分开两者的区别. 简单的说, 两才的区别在于, setTimeout()方法是在等待指定时间后执行函数, 且只执行一次传入的句柄函数. setInterval()方法是每指定间隔时间后执行一次传入的句柄函数,循环执行直至关闭窗口或clearInterval().

使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间，再进行某项操作,代码如下:

setTimeout("function",time) 设置一个超时对象

setInterval("function",time) 设置一个超时对象

SetInterval为自动重复，setTimeout不会重复。

clearTimeout(对象) 清除已设置的setTimeout对象

clearInterval(对象) 清除已设置的setInterval对象

如果用setTimeout实现setInerval的功能，就需要在执行的程序中再定时调用自己才行。如果要清除计数器需要根据使用的方法不同，调用不同的清除方法：

例如代码如下:

tttt=setTimeout('northsnow()',1000);

clearTimeout(tttt);

或者：

tttt=setInterval('northsnow()',1000);

clearInteval(tttt);

举一个例子,代码如下:

  1. <div id="liujincai"></div>  
  2. <input type="button" name="start" value="start" onclick='startShow();'>  
  3. <input type="button" name="stop" value="stop" onclick="stop();">  
  4. <script language="javascript">  
  5.    var intvalue=1;  
  6.    var timer2=null;  
  7.    function startShow()  
  8.    {  
  9.       liujincailiujincai.innerHTML=liujincai.innerHTML + " " + (intvalue ++).toString();  
  10.       timer2=window.setTimeout("startShow()",2000);  
  11.    }  
  12.    function stop()  
  13.    {  
  14.       window.clearTimeout(timer2);  
  15.    }  
  16. </script>  

或者代码如下:

  1. <div id="liujincai"></div>  
  2. <input type="button" name="start" value="start" onclick='timer2=window.setInterval("startShow()",2000);//startShow();'>  
  3. <input type="button" name="stop" value="stop" onclick="stop();">  
  4. <script language="javascript">  
  5.    var intvalue=1;  
  6.    var timer2=null;  
  7.    function startShow()  
  8.    {  
  9.       liujincailiujincai.innerHTML=liujincai.innerHTML + " " + (intvalue ++).toString();  
  10.    }  
  11.    function stop()  
  12.    {  
  13.       window.clearInterval(timer2);  
  14.    }//xiariboke.net  
  15. </script>  
标签：

给我留言