详解JavaScriptsetTimeout()

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

成都创新互联公司是一家专业提供通海企业网站建设,专注与网站设计、成都网站建设、H5页面制作、小程序制作等业务。10年已为通海众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

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

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

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

实例

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

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

setTimeout() 是设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了, 浏览器就会执行一个指定的代码, 如下图: 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( ) " />   
    

尝试一下 »

网页名称：详解JavaScriptsetTimeout()
本文地址：http://www.36103.cn/qtweb/news12/8862.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联