JavaScript setTimeout用法总结：与setInterval区别、参数及清除定时器

1、前言

js中的setTimeout方法应用场景广泛，常用于页面刷新控制或代码延迟执行等场景。许多JavaScript初学者对该方法的使用尚显生疏。尽管作者已从事javascript开发工作两年有余，但在处理setTimeout时仍偶尔需要查阅文档。本文旨在对JavaScript的setTimeout方法进行系统性梳理与总结。

2、setInterval与setTimeout的区别

提及setTimeout时，人们往往会联想到setInterval，二者在用法上虽有相似之处，但核心机制存在显著差异。本文将结合两者进行对比总结。

3、setTimeout

定义与用法：setTimeout()方法用于在指定的毫秒数延迟后，调用指定的函数或计算表达式。

语法格式：setTimeout(code,millisec) 　

参数说明：code（必需）：指定在定时器到期后要执行的JavaScript 代码字符串。millisec（必需）：执行代码前需等待的毫秒数。

提示：setTimeout()仅执行一次code。若需多次调用，建议使用setInterval()，或在code内部再次调用setTimeout()以实现循环。

setInterval：

setInterval() 方法允许按照指定的周期（以毫秒为单位）重复调用函数或计算表达式。

setInterval() 方法会持续不断地调用函数，直到clearInterval() 被调用或窗口被关闭。由setInterval() 返返回的ID值可作为clearInterval() 方法的参数，用于取消周期性执行。

语法格式：setInterval(code,millisec[,"lang"])

参数说明：code （必需）：要调用的函数或要执行的代码串。millisec （必须）：周期性执行或调用code 之间的时间间隔，单位为毫秒。

返回值: 一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

区别：

通过上述分析，setTimeout与setinterval的主要区别在于：

setTimeout仅运行一次，即设定时间到达后触发指定代码，执行完毕后即结束。若需在运行代码中再次执行相同的setTimeout命令，则可实现循环运行（即需函数自身再次调用setTimeout()）。

而setinterval则是循环运行的，即每隔设定的时间间隔就触发指定代码，这才是真正的定时器机制。

setinterval使用相对简单，而setTimeout则更为灵活，可以随时退出循环，且支持设置不固定的时间间隔（例如第一次1秒，第二次2秒，第三次3秒）。

从个人使用习惯来看，更倾向于使用setTimeout。

4、setTimeout的用法

通过一个案例进行演示，首先打开记事本，将以下代码粘贴并运行，观察效果。


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1> <font color=blue> haorooms博客示范网页 </font> </h1>
<p> 请等三秒!</p>

<script>
setTimeout("alert('对不起, haorooms博客要你等候多时')", 3000 )
</script>

</body> 
</html>

页面将在停留三秒后弹出对话框。此案例应用了setTimeout的基本语法，需注意的是，setTimeout不会自动重复执行。

setTimeout也可以执行function，并且可以通过自身调用实现不断重复执行。

接下来共同完成另一个案例：


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var x = 0
function countSecond()
{
   x = x+1
　 document.haorooms.haoroomsinput.value=x
　 setTimeout("countSecond()", 1000)
}
</script>
</head>
<html>
<body>

<form name="haorooms">
   <input type="text" name="haoroomsinput"value="0" size=4 >
</form>

<script>
countSecond()
</script>

</body> </html>

观察可见，input文本框中的数字每秒递增。因此，setTimeout也可用于制作网页中的动态时间跳动效果。

为加深理解，再做一个计算用户在haorooms某个页面停留时间的例子：


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
x=0
y=-1
function countMin()
{　y=y+1
　 document.displayMin.displayBox.value=y
　 setTimeout("countMin()",60000)
}
function countSec()
{　x = x + 1
　 z =x % 60
　 document.displaySec.displayBox.value=z
　 setTimeout("countSec()", 1000)
}
</script> </head>
<body>
<table> <tr valign=top> <td> 你在haorooms博客中的停留时间是: </td>
<td> 
<form name=displayMin>
   <input type=text name=displayBox value=0 size=4 >
</form> 
</td>
<td> 分 </td>
<td> 
<form name=displaySec> </td>
<td> <input type=text name=displayBox value=0 size=4 >
</form>
 </td>
<td> 秒。</td> </tr>
 </table>
<script>
countMin()
countSec()
</script>
</body>
</html>

通过上述示例，相信您对setTimeout（）的用法已有了清晰的认识。

5、clearTimeout( )

接下来介绍clearTimeout( ) ，

clearTimeout()的语法如下：

clearTimeout(timeoutID)

要使用clearTimeout( )，在设定 setTimeout( )时，需为该setTimout( ) 指定一个名称，该名称即为timeoutID 。停止定时器时，即使用此timeoutID 进行调用。这是一个自定义名称，但许多人直接以timeoutID 作为变量名。

在以下示例中，设定了两个timeoutID，分别命名为meter1及meter2。

具体代码如下：

timeoutID 　↓ meter1 = setTimeout(“count1( )”, 1000) meter2 = setTimeout(“count2( )”, 1000)

利用meter1及meter2这些timeoutID 名称，在设定clearTimeout( ) 时，即可指定对哪一个setTimeout( )生效，从而避免干扰另一个setTimeout()的操作。

以下是clearTimeout()的完整案例：


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script>
x = 0
y = 0
function count1()
{　x = x + 1
　 document.display1.box1.value = x
　 meter1=setTimeout("count1()", 1000)
}
function count2()
{　y = y + 1
　 document.display2.box2.value = y
　 meter2=setTimeout("count2()", 1000)
}
</script> </head>
<body> 
<p> </br>
<form name="display1">
    <input type="text" name="box1" value="0" size=4 >
    <input type=button value="停止计时" onClick="clearTimeout(meter1) " >
    <input type=button value="继续计时" onClick="count1() " >
</form>
<p>
<form name="display2">
    <input type="text" name="box2" value="0" size=4 >
    <input type=button value="停止计时" onClick="clearTimeout(meter2) " >
    <input type=button value="继续计时" onClick="count2() " >
</form>

<script>
    count1()
    count2()
</script>
</body>
</html>

6、结尾

至此，关于JavaScript中setTimeout()使用方法的总结介绍完毕。如需了解更多相关用法，请搜索本站历史文章或继续浏览后续内容，感谢大家的支持！

JavaScript setTimeout() 方法详解与实战案例