良许Linux教程网 干货合集 详解JavaScript setTimeout()

详解JavaScript setTimeout()

在制作网页动态效果时,可能会遇到需要延时在执行的需求,这时就可以用到 js 中定时器来实现此类需求,本文将对setTimeout()做一个用法总结。

JavaScript setTimeout() 介绍JavaScript setTimeout() 介绍

语法格式可以是以下两种:

setTimeout(要执行的代码, 等待的毫秒数)
setTimeout(JavaScript 函数, 等待的毫秒数)

接下来我们先来看一个简单的例子:

实例

setTimeout("alert('对不起, 要你久候')", 3000 )

尝试一下 » 在测试代码中我们可以看到页面在开启三秒后, 就会出现一个 alert 对话框。

setTimeout() 是设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了, 浏览器就会执行一个指定的代码, 如下图: JavaScript setTimeout() 介绍JavaScript setTimeout() 介绍 setTimeout() 也可以用来执行指定的函数(function),如下实例,网页上的文字会在三秒后消修改。

实例

"content"> 请等三秒钟!

  

尝试一下 » 实例中设定了等待 3 秒 (3000 milliseconds) 后浏览器就会执行 changeState( ) 这一个函数。

接下来我们可以通过 setTimeout() 不断执行指定函数来实现一个计数器:

实例

type="text" id="displayBox" name="displayBox" value="0">

尝试一下 » 实例中页面在载入后执行 countSecond() 函数,该函数内使用了 setTimeout() 方法,该方法在每隔一秒调用 countSecond() 函数,所以最终会导致 countSecond( ) 每秒执行一次,实现计数效果。

当然我们也可以在计数器的函数上添加一些片段,实现在指定条件下停止计数:

实例

type="text" id="displayBox" name="displayBox" value="0">

尝试一下 » 实例中在 x 小于 20 的时候会每秒执行一次 countSecond() 函数,在 x 大于等于20 的时候就会停止执行。

既然有开始计数,那么相对应的就要有停止计数,停止计时使用的函数为 clearTimeout()。

setTimeout() 方法可以使到浏览器不断执行一段代码或一个函数 当一个 setTimeout( ) 开始了循环的工作, 我们要使它停下来, 可使用 clearTimeout( ) 这方法。

clearTimeout() 语法:

clearTimeout(timeoutID)

timeoutID 为调用 setTimeout() 函数时所获得的返回值,使用该返回标识符作为参数,可以取消该 setTimeout() 所设定的定时执行操作。

meter1 =setTimeout("count1()", 1000)
meter2 =setTimeout("count2()", 1000)

使用 meter1 与 meter2 作为 timeoutID 的名称, 在设定 clearTimeout( ) 时, 就可指定对哪一个 setTimeout() 有效, 不会影响另一个 setTimeout() 的操作。

如下实例:

实例

"display1">      type="text" id="box1" name="box1" value="0" size="4" />      type="button" value="停止计时" onclick="clearTimeout(meter1)" />      type="button" value="继续计时" onclick="count1() " />  
  

  
"display2">      type="text" id="box2" name="box2" value="0" size="4" />      type="button" value="停止计时" onclick="clearTimeout(meter2) " />      type="button" value="继续计时" onclick="count2( ) " />  
  

尝试一下 »

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

137e00002230ad9f26e78-265x300
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部
关注公众号
【良许Linux】
回复1024
获取 
99G Linux
从菜鸡到大神
VIP资源课程
关注公众号
【良许Linux】
回复1024
获取 
99G Linux
从菜鸡到大神
VIP资源课程