JavaScript setTimeout() 用法详解

admin

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

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

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

复制代码

例如：

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

复制代码

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

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

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

1. <p id="content"> 请等三秒钟!</p>  
   
2. <script>  
   
3. setTimeout("changeState()",3000 );  
   
4. function changeState(){  
   
5.     let content=document.getElementById('content');  
   
6.     content.innerHTML="<div style='color:red'>我是三秒后显示的内容！</div>";  
   
7. }  
   
8. </script>

复制代码

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

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

1. <input type="text" id="displayBox" name="displayBox" value="0">
   
2. 
   
3. <script>
   
4. x = 0
   
5. function countSecond()
   
6. {　
   
7.     x = x+1
   
8.     document.getElementById("displayBox").value=x
   
9.     setTimeout("countSecond()", 1000)
   
10. }
    
11. // 执行函数
    
12. countSecond()
    
13. </script>

复制代码

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

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

1. <input type="text" id="displayBox" name="displayBox" value="0">
   
2. 
   
3. <script>
   
4. x = 0
   
5. function countSecond()
   
6. {　
   
7.     if(x<20) {
   
8.         x = x+1
   
9.         document.getElementById("displayBox").value=x
   
10.         setTimeout("countSecond()", 1000)
    
11.     }
    
12. }
    
13. // 执行函数
    
14. countSecond()
    
15. </script>

复制代码

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

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

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

clearTimeout() 语法：

1. clearTimeout(timeoutID)

复制代码

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

1. meter1 =setTimeout("count1()", 1000)
   
2. meter2 =setTimeout("count2()", 1000)

复制代码