JavaScript setTimeout() 用法详解：语法、定时器控制与防重复调用

作者：半夏时间：2026-10-26 13:45:45浏览：222

本文详细介绍JavaScript中setTimeout()函数的具体用法，包括基本语法、参数传递及函数调用方式。深入解析如何通过clearTimeout()停止定时器，以及如何利用Flag标志位防止重复点击导致的定时器叠加问题，同时对比setInterval并说明延迟时间的浏览器限制机制。

setTimeout() 基本语法与调用方式

setTimeout() 是 window 对象的一个方法，通常调用时会省略顶层容器 window 前缀。该函数用于设定一个延迟时间，当时间到达时，浏览器会自动执行指定的方法。

首先通过一个简单但无实际业务价值的示例来演示 setTimeout() 的基本语法结构。

1、setTimeout() 语法示例

<html>
<body text=red>
<h1> <font color=blue> 示范网页 </font> </h1> <p> </br>
<p> 请等三秒钟!
<script>
setTimeout("alert('对不起, 三秒钟已到')", 3000 )
</script>
</body> </html>

2. 注意观察，网页加载三秒后，页面会弹出一个 alert 对话框。

setTimeout() 用于设定指定的等待时间（单位为毫秒，millisecond）。时间耗尽后，浏览器将执行指定的 method 或 function，其标准语法如下：

setTimeout(code, milliseconds, param1, param2, ...)
setTimeout(function, milliseconds, param1, param2, ...)

code/function：必选参数。指定要调用的代码字符串或函数引用。

milliseconds：可选参数。指定执行 code/function 前需等待的时间，单位为毫秒。若未提供，默认值为 0。

param1, param2, ...：可选参数。指定传递给执行函数的额外参数（注意：IE9 及更早版本不支持此参数）。

本示例设定等待时间为 3 秒（即 3000 毫秒），时间到达后浏览器执行 alert() 方法。需要注意的是，该方法可以由开发者自定义重写。接下来将展示调用 function 的具体方式。

<html>
 <head></head>
 <body text="red"> 
  <h1><font color="blue"> 示范网页 </font></h1> 
  <script>
// setTimeout("alert('出窗')",3000 );
setTimeout("changeState()",3000 );
function changeState(){
  // alert("弹出");
  let content=document.getElementById('content');
  content.innerHTML="<div>这是三秒钟之后</div>";
}
</script> 
  <p id="content"> 请等三秒钟!</p>  
 </body>
</html>

上述代码实现了在 3 秒后更换文本内容的功能，在更换内容时调用了 changeState() 方法。

3、基于上述基础，我们可以实现一个按时间递增的自动计数器，代码如下所示：

<html>
<body text=red>
<h1><font color=blue> 示范网页 </font></h1>
<script>
  var x=0;
 
  function changeState(){
        x=x+1;
        //注意这里的调用方式，使用引号包围
        setTimeout("changeState()",1000 );
        let content=document.getElementById('content');
         content.innerHTML=x;
         console.log(x);
      }
</script>
<button onclick="changeState()">开始计时</button>
<p>已运行时间</p>
<p id="content"></p>
</body>
</html>

在以上代码中，当点击按钮启动 changeState() 后，会触发 setTimeout()。该定时器在一秒后再次启动 changeState()，而 changeState() 执行完毕后又再次启动 setTimeout()。因此，结果是 changeState() 每秒执行一次，从而实现数值的递增。

虽然实现了数值递增，但连续点击按钮时，会发现数值增加速度快于 1 秒间隔（即小于 1 秒）。为此，我们需要添加限制条件，例如限制 x < 60 后重新开始，其他位进 1，从而实现钟表计时功能，代码如下：

<html>
<body text=red>
<h1><font color=blue> 示范网页 </font></h1>
<script>
  var x=00;
  var y=00;
  var z=00;
 
  function changeState(){
    if(x<=59&&x>=0 && y<=59 && y>=0 && z<=59 && z>=0){
      //注意这里的调用方式，使用引号包围
      let content=document.getElementById('content');
       content.innerHTML=z+":"+y+":"+x;
       console.log(x);
        x=x+1;
    }else if(y<=59 && y>=0 && z<=59 && z>=0){
      y=y+1;
      x=0;
    }
    else if (z<=59 && z>=0) {
      z=z+1;
      y=0;
      x=0;
    }
    setTimeout("changeState()",1000 );
  }
</script>
<button onclick="changeState()">开始计时</button>
<p>已运行时间</p>
<p id="content"></p>
</body>
</html>

实现效果如下所示：

setTimeout() 基本语法与调用方式

使用 clearTimeout() 停止定时器

3、既然有开始计时，自然也需要停止计时，这就涉及到另一个函数：clearTimeout()。

读者可能会好奇，为什么需要停止功能？在什么场景下会用到？

例如，当执行某项操作后，该操作会在几秒钟后延迟执行。但如果用户关闭了页面或卸载了组件，我们可能不再需要执行该延迟操作。因此，可以在页面关闭或组件卸载时取消这个延迟时间。

setTimeout() 可使浏览器不断执行一个 function。当一个 setTimeout() 开始循环工作时，若要使其停止，可使用 clearTimeout() 方法。 clearTimeout() 的语法如下：clearTimeout(timeoutID)。

要使用 clearTimeout()，在设定 setTimeout() 时必须赋予其一个名称，该名称即为 timeoutID。停止时，即使用此 timeoutID 来终止定时器。这是一个自定义名称。如下示例：

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

使用 meter1 和 meter2 这些 timeoutID 名称，在设定 clearTimeout() 时，可以指定对哪一个 setTimeout() 生效，而不会干扰另一个 setTimeout() 的操作。

如下所示为停止语句（注意：count1() 和 count2() 分别是计时开始的方法，而 meter1 和 meter2 分别是 setTimeout 的定义变量）。

<html>
 <head> 
  <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 bgcolor="lightcyantext=red"> 
  <p> <br /> </p>
  <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> </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>

利用 Flag 标志位防止重复调用

4、设置点击一次标志——Set Flag

前一个练习提到使用按钮启动一个 function，每按一次就会启动该 function 一次。请看以下示例。

在该示例中，有以下设定： 1. 程序启动时 flag = 0。 2. 当 counter() 执行时，会同时将 flag 变为 1。 3. 在 [继续计时] 按钮的反应中，会先检查 flag 是 0 还是 1。若是 0，则产生作用；若是 1，则无反应。 4. 使用此 flag 方式，当 count() 函数启动后，[继续计时] 按钮将失效。

此处的 flag 是一个变量，可任意命名。我们称其为 flag 的原因在于，该变量如同一面旗帜：竖起旗帜（flag is on）会产生一个作用，放下旗帜（flag is off）则产生另一个作用。练习——仅可开启一次的 function

此练习在上一练习基础上增加了一个 flag，使得每次只能有一个 count() 函数在运行。

以下内容：

<html>
 <head> 
  <script>
x = 0
flag = 0
function count( )
{　x = x+ 1
　 document.display.box.value= x
　 timeoutID=setTimeout("count()", 1000)
　 flag = 1
}
 
function restart( )
{　if (flag==0)
　　　{　count( )　}
}
</script> 
 </head> 
 <body bgcolor="lightcyantext=red"> 
  <p> <br /> </p>
  <form name="display"> 
   <input type="text" name="box" value="0" size="4" /> 
   <input type="button" value="停止计时" 　　onclick="clearTimeout(timeoutID);flag=0" /> 
   <input type="button" value="继续计时" onclick="restart() " /> 
  </form> 
  <p> <script>
count( )
</script> </p>
  <form> 
   <input type="button" value="Show flag" onclick="alert('The flag now is '+ flag)" /> 
  </form>  
 </body>
</html>

效果说明：

1. 在网页中，你应该能看到三个按钮及文字框中的数字跳动。 2. 请点击 [Show flag] 按钮，应看到一个对话框显示 flag 为 1。 3. 请点击 [停止计时] 按钮，数字停止跳动；随后点击 [Show flag] 按钮，应看到对话框显示 flag 为 0。 4. 请多次点击 [继续计时] 按钮，应见到数字不会加快；点击 [Show flag] 按钮，应看到对话框显示 flag 变回 1。

代码解析：

1. 该网页第 5 行有语句：flag = 0，这是设定 flag 变量并将初始值定为 0。你也可以将初始值定为 1，随后相关的 0 和 1 对调。 2. count() 函数方法的最后一句是 flag = 1，因此启动 count() 后，flag 的状态将变为 1。 3. [继续计时] 按钮用于启动 restart()，该函数有以下设定：

function restart( )
{　if (flag==0)
　　　{　count( )　}
}

此处的 if 语句检查 flag 是否等于 0。若是 0，则启动 count()；若是 1（即非 0），则无反应。使用此方法，若 count() 已在执行中，[继续计时] 按钮将不起作用。

此处的 flag = 1 设定，实际设为 1、2 或 3 等数值均无区别，只要不是 0 即可。因此，这两个相对标志看似是 "0" 和 "1"，实际是 "0" 和 "non-zero"（非 0）。

4. [停止计时] 按钮有以下设定：

onClick="clearTimeout(timeoutID);flag=0"

上述代码在停止 setTimeout() 操作的同时，将 flag 传回 0，这使得 restart() 函数可以重新启动 count()。

setTimeout 与 setInterval 及延迟限制

注意：下面方法是定时作用，能够按照一定的时间执行相同的操作：setInterval。

let i =0; setInterval(() => { console.log(i++); },1500);//1000为1秒钟

在以上代码中，每隔 1.5 秒就会有一次打印。对于此方法，同样能够实现上述操作中的计时功能，并且代码更加简单。

值得注意的细节是：setTimeout 的第二个参数设置为 0 时，有人可能认为这样就不是异步了，其实仍然是异步。这是因为 HTML5 标准规定该函数的第二个参数不得小于 4 毫秒，不足时会自动增加至 4 毫秒。

到此为止，关于 JavaScript 中 setTimeout() 的具体用法文章介绍完毕。更多相关 JavaScript setTimeout() 内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！

作者最新文章

JavaScript闭包与类(Class)的区别及适用场景对比

2026-11-05 15:48:57

JavaScript入门要学ES6吗？let与箭头函数等新特性解析

2026-11-05 14:49:16

JavaScript 8种数据类型详解：基本类型与引用类型的区别

2026-11-05 14:25:15

怎么在JavaScript中使用async/await优化Ajax异步流程

2026-11-05 13:56:15

JavaScript replace回调函数实现动态正则替换逻辑

2026-11-05 13:52:13