JS定时器详解：setTimeout、setInterval区别与clearTimeout使用指南

JavaScript定时器概述

JavaScript中的setTimeout方法应用场景广泛，常用于页面刷新控制或代码延迟执行。尽管许多开发者已接触该API，但部分新手对其具体用法仍感困惑。即便对于有经验的开发者，深入理解其机制也需参考文档。本文将对setTimeout方法进行系统性梳理与总结。

setTimeout与setInterval的区别

在讨论setTimeout时，常会联想到setInterval，两者功能相似但存在关键差异。本文将同时对比总结这两个方法的区别与联系。

setTimeout方法的定义是：用于在指定的毫秒数之后调用函数或执行计算表达式。

其语法结构为：setTimeout(code, millisec)。

参数说明如下：code为必需参数，指定调用函数后需执行的JavaScript代码字符串；millisec为必需参数，指定执行代码前需等待的毫秒数。需要注意的是，setTimeout仅执行一次code。若需多次调用，应使用setInterval，或在code内部再次调用setTimeout以实现循环。

setInterval方法用于按指定的周期（以毫秒计）重复调用函数或执行计算表达式。

setInterval会持续调用函数，直到调用clearInterval或窗口关闭为止。该方法返回的ID值可作为clearInterval的参数来停止执行。

setInterval的语法为：setInterval(code, millisec[, "lang"])。

参数说明：code为必需参数，指定要调用的函数或代码串；millisec为必需参数，指定执行code的时间间隔，单位为毫秒。

返回值：返回一个数值，该值可传递给Window.clearInterval()，用于取消对code的周期性执行。

通过上述定义，可以明确setTimeout与setInterval的主要区别。

setTimeout仅执行一次，即在设定的时间到达后触发指定代码，执行完毕后即结束。若需循环执行，必须在执行的代码中再次调用setTimeout。

setInterval则是循环运行的，即在每个设定的时间间隔到达时触发指定代码，这才是真正的定时器机制。

setInterval使用较为简单，而setTimeout则更为灵活，可以随时退出循环，并可设置为非固定时间间隔运行，例如第一次1秒，第二次2秒，第三次3秒。

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

setTimeout基础用法与案例

接下来通过具体案例演示setTimeout的用法。首先打开记事本，将以下代码粘贴并运行以查看效果。


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

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

</body> 
</html>

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

setTimeout不仅可以执行字符串代码，还可以执行函数，并实现不断重复执行的效果。我们继续通过一个案例进行演示。


<!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()的用法已有了清晰的认识。

clearTimeout控制定时器

接下来介绍clearTimeout()方法。

clearTimeout()的语法如下。

语法结构为：clearTimeout(timeoutID)。

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

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

代码示例：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>

通过上述讲解，不知您对setTimeout是否已充分理解？下次使用时能否熟练运用？是否还会将setTimeout和setInterval混淆？如有任何疑问，欢迎交流讨论，共同提高。

setTimeout高级用法与原理

setTimeout(表达式, 延时时间)。setTimeout(表达式, 交互时间)。延时时间/交互时间以毫秒为单位（1000ms=1s）。setTimeout在执行时，是在载入后延迟指定时间后，去执行一次表达式，仅执行一次。setTimeout在执行时，它从载入后，每隔指定的时间就执行一次表达式（注：此处原文描述存在歧义，通常指setInterval的行为，或指通过递归setTimeout实现的循环）。

1. 基本用法：执行一段代码。

代码如下。

 
var i=0;
setTimeout("i+=1;alert(i)", 1000);

执行一个函数。

代码如下。

 
var i=0;
setTimeout(function(){i+=1;alert(i);}, 1000);

//注意比较上面的两种方法的不同。

下面再来一个执行函数的示例。

代码如下。

 
var i=0;
function test(){
i+=1;
alert(i);
} 
setTimeout("test()", 1000);

也可以这样。

代码如下。

 
setTimeout(test, 1000);

总结。

setTimeout的原型如下。

iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])

setTimeout有两种形式。

setTimeout(code, interval)

setTimeout(func, interval, args)

其中code是一个字符串。

func是一个函数。

注意"函数"的意义，是一个表达式，而不是一个语句。

比如你想周期性执行一个函数。

function a(){

//...
}

可写为

setTimeout("a()", 1000)

或

setTimeout(a, 1000)

这里注意第二种形式中，是a，不要写成a()，切记!!!

展开来说，不管你这里写的是什么，如果是一个变量，一定是一个指向某函数的变量；如果是个函数，那它的返回值就要是个函数。

2. 用setTimeout实现setInterval的功能。

思路很简单，就是在一个函数中调用不停执行自己，有点像递归。

代码如下。

 
var i=0;
function xilou(){
i+=1;
if(i>10){alert(i);return;}
setTimeout("xilou()", 1000);
//用这个也可以
//setTimeout(xilou, 1000);
}

3. 在类中使用setTimeout。

终于到正题了，其实在类中使用大家遇到的问题都是关于this的，只要解决了这个this的问题就万事无忧了。

呵呵。让我们来分析一下。

代码如下。

 
function xilou(){
this.name="xilou";
this.sex="男";
this.num=0;
} 
xilou.prototype.count=function(){
this.num+=1;
alert(this.num);
if(this.num>10){return;}
//下面用四种方法测试,一个一个轮流测试。
setTimeout("this.count()", 1000);//A:当下面的x.count()调用时会发生错误：对象不支持此属性或方法。
setTimeout("count()", 1000);//B:错误显示：缺少对象
setTimeout(count, 1000);//C:错误显示：'count'未定义
//下面是第四种
var self=this;
setTimeout(function(){self.count();}, 1000);//D:正确
} 
var x=new xilou();
x.count();

错误分析。

A：中的this其实指是window对象，并不是指当前实例对象。

B：和C：中的count()和count其实指的是单独的一个名为count()的函数,但也可以是window.count(),因为window.count()可以省略为count()。

D：将变量self指向当前实例对象，这样js解析引擎就不会混肴this指的是谁了。

话说回来，虽然我们知道setTimeout("this.count()", 1000)中的this指的是window对象，但还是不明白为什么会是

window对象^_^(有点头晕...)。

那我们可以想象一下这个setTimeout是怎样被定义的。

setTimeout是window的一个方法，全称是这样的：window.setTimeout()。

那应该是这样被定义的。

代码如下。

 
window.setTimeout=function(vCode, iMilliSeconds [, sLanguage]){
//.....代码
return timer//返回一个标记符
}

所以当向setTimeout()传入this的时候，当然指的是它所属的当前对象window了。

JavaScript setTimeout 与 setInterval 详解及 clearTimeout 用法

JavaScript定时器概述

setTimeout与setInterval的区别

setTimeout基础用法与案例

clearTimeout控制定时器

setTimeout高级用法与原理

实用工具推荐