JavaScript 实现基础计数器:setTimeout 与 setInterval 详解
本文介绍如何使用 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>
运行效果如下:

功能演示与潜在问题
点击“开始”按钮后,计数器从 0 开始累加;点击“停止”按钮时,计时暂停在当前数值;再次点击“开始”则从暂停处继续累加。然而,该程序存在一个缺陷:如果频繁点击“开始”按钮,计时速度会加快;同时,单次点击“停止”按钮可能无法立即停止计时,需要多次点击才能完全停止。
JS大数值转字符串出现科学计数法怎么办
2026-11-05 17:09:21
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
