JavaScript setTimeout() 基本用法与实战示例
本文详细介绍 JavaScript 中 setTimeout() 方法的基本用法。涵盖如何设置毫秒级延时执行函数、在函数体内实现循环调用、处理数值递增显示以及自动关闭弹窗等实际场景。同时讲解如何使用 clearTimeout() 取消已设定的定时器，帮助开发者灵活运用定时功能。
setTimeout() 基本定义与执行特性
在开发网页动态交互效果时，经常需要实现延时执行特定逻辑的需求。此时，可以利用 JavaScript 提供的定时器机制来满足此类要求。本文将针对 setTimeout() 方法的具体应用进行总结与说明。
- setTimeout() 函数的主要作用是在经过指定的毫秒数后，调用指定的函数或计算表达式。时间单位以毫秒（ms）为单位进行计算。
- 需要注意的是，setTimeout() 默认只执行一次目标函数。若需实现多次重复调用，应使用 setInterval()，或者在回调函数内部再次调用 setTimeout() 来实现递归式的定时执行。
setTimeout() 基础用法示例
setTimeout() 的具体用法如下文所示。
以下通过一个简单的示例进行说明。
在页面加载后等待 3 秒，随后弹出一个内容为“你好”的警告框。
<script>
setTimeout("alert('你好')", 3000)
</script>运行效果如下：
复杂函数定义与循环递增应用
接下来展示一个更为复杂的函数定义方式。
<script>
var myvar;
function myFunction() {
myVar = setTimeout(alertFunc, 3000);
}
function alertFunc() {
alert("Hello!");
}实现一个自动每秒数值加 1 的函数逻辑。
通过调用 setTimeout() 使文本框内的数值每秒增加 1。此外，也可以根据需求调整递增频率，例如设定每 5 秒增加 5，或者每 5 秒增加 1。
<script>
x = 0
function countSecond( )
{ x = x+1
document.fm.displayBox.value=x
setTimeout("countSecond()", 1000)
}
</script>
<body bgcolor=lightcyan text=red> <p> </br>
<form name=fm>
<input type="text" name="displayBox"value="0" size=4 >
</form>
<script>
countSecond( )
</script>
</body> 尽管在代码中设定了 1 秒的延时，但由于浏览器还需执行其他渲染或脚本任务，因此一个完整循环的实际耗时通常会略大于 1 秒。例如，在一分钟的统计中，可能仅执行了 58 个循环。
窗口延时关闭与定时器取消
实现网页窗口的延时关闭功能。
点击按钮后，通过 window.open() 打开一个新窗口并执行相关命令，随后在 3 秒后自动关闭该窗口。
<button onclick="openWin()">打开 "窗口"</button>
<script>
function openWin() {
var myWindow = window.open("", "", "width=200, height=100");
myWindow.document.write("这是一个新窗口");
setTimeout(function(){ myWindow.close() }, 3000);
}
</script>如何取消 setTimeout() 的执行。
当一个 setTimeout() 已经开始执行循环任务时，如果需要终止该任务，可以使用 clearTimeout() 方法来停止它。
<button onclick="myFunction()">点我弹出</button>
<button onclick="myStopFunction()">阻止弹出</button>
<script>
var myVar;
function myFunction() {
myVar = setTimeout(function(){ alert("Hello") }, 2000);
}
function myStopFunction() {
clearTimeout(myVar);
}
</script>总结部分。
在代码编写过程中，可以灵活运用 setTimeout()、clearTimeout() 以及 setInterval() 的特性，以实现所需的功能目标。
以上就是本文的全部内容，希望能为各位的学习提供参考，也欢迎大家继续支持本站。
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数？详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决？
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28