网站地图    收藏   

主页 > 前端 > javascript >

js中SetInterval与setTimeout延时方法

来源:自学PHP网    时间:2023-11-07 10:05 作者: 阅读:

[导读] 我们经常在看到有些网站的广告都是过一会才加载的,其实这个就是一个简单的延时处理了,在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);


举一个例子:

代码如下


<div id="liujincai"></div>

<input type="button" name="start" value="start" onclick='startShow();'>

<input type="button" name="stop" value="stop" onclick="stop();">

<script language="javascript">

   var intvalue=1;

   var timer2=null;

   function startShow()

   {

      liujincai.innerHTML=liujincai.innerHTML + " " + (intvalue ++).toString();

      timer2=window.setTimeout("startShow()",2000);

   }

   function stop()

   {

      window.clearTimeout(timer2);

   }

</script>


或者:

代码如下


<div id="liujincai"></div>

<input type="button" name="start" value="start" onclick='timer2=window.setInterval("startShow()",2000);//startShow();'>

<input type="button" name="stop" value="stop" onclick="stop();">

<script language="javascript">

   var intvalue=1;

   var timer2=null;

   function startShow()

   {

      liujincai.innerHTML=liujincai.innerHTML + " " + (intvalue ++).toString();

   }

   function stop()

   {

      window.clearInterval(timer2);

   }

</script>


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论