JavaScript 实现基础计数器：setTimeout 与 setInterval 详解

作者：函数茶馆

时间：2026-10-22

本文介绍如何使用 JavaScript 的计时事件实现基础计数器。通过 setTimeout 和 setInterval 两个关键方法，可以设定时间间隔执行代码。文章提供了完整的 HTML 与 JS 示例代码，演示了从 0 开始累加、暂停及继续计数的功能，并指出了连续点击开始按钮导致计时加速及停止不灵敏的潜在 Bug。

文章目录

本文展示了一个使用 JavaScript 编写的计数器示例代码，供读者参考学习。

JavaScript 计时事件机制

JavaScript 提供了计时事件机制，允许在设定的时间间隔之后执行代码，而非在函数调用后立即执行。

在 JavaScript 中实现计时事件主要依赖两个核心方法：

setInterval()：按照指定的毫秒数间隔，不停地循环执行指定的代码。setTimeout()：在暂停指定的毫秒数后，仅执行一次指定的代码。

注意：setInterval() 和 setTimeout() 均属于 HTML DOM Window 对象的方法。本文重点介绍 setTimeout() 方法的使用。

计数器实现代码示例

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      var c = 0
      var t

      function timedCount() {
        document.getElementById('txt').value = c;
        c = c + 1;
        //创建计时器，在指定周期内循环执行
        t = setTimeout("timedCount()", 1000);
      }

      function stopCount() {
        //清除计时器
        clearTimeout(t);
      }
    </script>
  </head>

  <body>

    <form>
      <input type="button" value="开始计时！" onClick="timedCount()">
      <input type="text" id="txt">
      <input type="button" value="停止计时！" onClick="stopCount()">
    </form>

  </body>

</html>

运行效果如下：

JavaScript 计时事件机制