JavaScript定时器setTimeout()和setInterval()详解
本文详解JavaScript中setTimeout和setInterval两种定时器的使用方法。介绍如何设置执行代码与等待毫秒数,并通过clearTimeout和clearInterval取消未执行的调用。通过示例演示间歇调用与超时调用的实现及清除逻辑,帮助开发者掌握定时器的核心操作。
本文介绍JavaScript定时器的具体实现方法,供读者参考。
超时调用setTimeout()
1、超时调用setTimeout()
超时调用指在指定时间后执行代码,即在执行前需等待特定的毫秒数。
setTimeout()函数接收两个参数:
1. 需要执行的代码或函数
2. 毫秒数(指定执行前等待的时间)
function test(){
alert("孙悟空");
}
setTimeout(test,2000); //2s后弹出 “孙悟空”
clearTimeout()
clearTimeout用于清除定时器,可取消尚未执行的调用。
var timmer=function test(){
alert("孙悟空");
}
setTimeout(test,2000); //2s后弹出 “孙悟空”
clearTimeout(timmer); //取消定时器,因为前者在两秒后调用,调用之前已经取消相当于什么也没发生
间歇调用setInterval()
2、间歇调用setInterval()
间歇调用指在指定时间间隔内重复执行代码,即每隔一段时间执行一次。
setInterval()同样接收两个参数,与setTimeout相同:
1. 需要执行的代码或函数
2. 毫秒数(指定执行前等待的时间)
function test(){
alert("孙悟空");
}
setInterval(test,2000); //每隔2s后弹出一次 “孙悟空”
clearInterval()
clearInterval()与clearTimeout()用法相同,均用于清除定时器。
var num=0;
var max=10;
function test(){
num++;
if (num==max){
clearInterval(timer); //累加到10时清除清定时器
alert("这里有"+num+"个孙悟空"); //这里有10个孙悟空
}
}
timer=setInterval(test,500);
在上述示例中,变量num每0.5秒递增一次,当达到最大值时清除之前设置的定时器(间歇调用)。
此模式也可通过超时调用实现。
var num=0;
var max=10;
function test(){
num++;
if (num<max){
setTimeout(test,500);
}else{
alert("这里有"+num+"个孙悟空")
}
}
setTimeout(test,500);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
