JavaScript setTimeout() 用法详解

setTimeout() 是属于 window 的方法,该方法用于在指定的毫秒数后调用函数或计算表达式。

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

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

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

实例

setTimeout(alert(‘对不起, 要你久候’), 3000 )

尝试一下 »

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

setTimeout() 是设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了, 浏览器就会执行一个指定的代码, 如下图:

setTimeout() 也可以用来执行指定的函数(function),如下实例,网页上的文字会在三秒后消修改。

实例

p id=content> 请等三秒钟!p>
script>
setTimeout(“changeState()”,3000 );
function changeState(){
let content=document.getElementById(‘content’);
content.innerHTML=”
div style=’color:red>我是三秒后显示的内容!div>“;
}
script>

尝试一下 »

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

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

实例

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

script>
x = 0
function countSecond()
{ 
x = x+1
document.getElementById(“displayBox”).value=x
setTimeout(“countSecond()”, 1000)
}
// 执行函数
countSecond()
script>

尝试一下 »

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

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

实例

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

script>
x = 0
function countSecond()
{ 
if(x
20) {
x = x+1
document.getElementById(displayBox).value=x
setTimeout(countSecond(), 1000)
}
}
// 执行函数
countSecond()
script>

尝试一下 »

实例中在 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() 的操作。

如下实例:

实例

form name=display1>
input type=text id=box1 name=box1 value=0 size=4 />
input type=button value=停止计时 onclick=clearTimeout(meter1) />
input type=button value=继续计时 onclick=count1() />
form>
p>p>
form name=display2>
input type=text id=box2 name=box2 value=0 size=4 />
input type=button value=停止计时 onclick=clearTimeout(meter2) />
input type=button value=继续计时 onclick=count2( ) />
form>
script>
x = 0
y = 0

function count1( )
{ 
x = x+ 1
document.getElementById(“box1”).value= x
meter1=setTimeout(“count1()”, 1000)
}

function count2( )
{ 
y = y+ 1
document.getElementById(“box2”).value= y
meter2=setTimeout(“count2()”, 1000)
}
// 执行函数
count1( )
count2( )
script>

尝试一下 »


相关页面

Window 对象: setTimeout() 方法

Window 对象: setTimeout() 方法

Window 对象: setInterval() 方法

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
  1. 免费下载或者VIP会员资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
  2. 提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。
  3. 找不到素材资源介绍文章里的示例图片?
    对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
  4. 付款后无法显示下载地址或者无法查看内容?
    如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理
  5. 购买该资源后,可以退款吗?
    源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源

评论(0)

提示:请文明发言