本文深入解析JavaScript中的两种内置计时器：setTimeout用于单次延时执行，setInterval用于循环执行。通过对比两者语法差异、参数说明及完整HTML/JS实例，帮助开发者掌握定时器核心用法，理解递归与直接循环的执行逻辑，并解决重启复杂等常见问题。
JavaScript 计时器概述
计时器在图片轮播、倒计时等与时间紧密相关的项目中扮演着核心角色，是实现这些功能的关键语法。想要一次深刻理解JavaScript计时器的工作原理吗？继续阅读下文，你将获得清晰的答案和实用技巧。
计时器的两种类型
JavaScript中的计时器主要分为两类：一类是延时后仅执行一次的定时器，另一类是延时后循环执行的定时器。值得注意的是，前者可以通过函数的递归调用，打破单次执行的限制，从而实现类似循环执行的效果。
setTimeout 语法与用法
setTimeout( javascript语句 , 毫秒); （其中第一个值可以是一个函数 需要加" "，也可以是代码）
//延迟一段时间 执行 执行一次
setInterval 语法与用法
setInterval("javascript语句" , 毫秒); （其中第一个值可以是一个函数 需要加" "，也可以是代码）
//循环执行
具体实例 （一些细节和具体的用法还是在案例代码中便于理解）
计时器完整实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计时器</title>
</head>
<body>
<button id="none">停止计时器</button>
<button id="start">开始计时器</button>
<script>
// 有两个计时器
// setTimeout();
// 延迟一段时间 执行 执行一次
// setInterval();
// 循环执行
var stoptime=document.getElementById('none');//默认从零开始自加 获取开始按钮
var starttime=document.getElementById('start');//获取停止按钮
var count=0;
var timecount;
// 第一种
/*showtime();
function showtime(){
count++;
console.log(count);
timecount=setTimeout('showtime()',1000);//延时一秒
}//利用递归来实现循环时间
stoptime.onclick=function(){//停止计时器
clearTimeout(timecount);//将计时器清除，即停止自加
}
starttime.onclick=function(){//开始计时器
timecount=setTimeout('showtime()',1000);//继续开始自加
}*/
//优点：重启计时器简单，由于是原本是单次执行，只需将之前的递归函数重新复制即可 缺点：需要递归调用
// 第二种
showtime();
function showtime(){//封装函数
timecount=setInterval(function(){
count++;
console.log(count);
},1000)
}
stoptime.onclick=function(){
clearInterval(timecount);
}
starttime.onclick=function(){
showtime();
}
//优点：不需要递归调用，直接实现循环。缺点：重启较复杂，需要调用所有函数，建议封装函数。
</script>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。