本文详细介绍JavaScript中setInterval和clearInterval的语法规范，强调函数名不可带括号及最小时间间隔限制。通过一个完整的抽奖案例，演示如何结合数组、DOM操作与定时器实现动态效果，并重点解析在多次点击启动时先清除旧定时器的必要性，防止定时器叠加导致无法停止的问题。
JavaScript 定时器基础语法
设置定时器
语法格式为：setInterval(函数，时间)
使用时需注意以下关键点：
在书写函数参数时，函数名后面不能带有括号。
setInterval(fn,1000)//正确
setInterval(fn(),1000)//错误设置的时间间隔最小值不应小于14毫秒。
清除定时器
语法格式为：clearInterval(所清除的定时器名称)
定时器综合应用实例
实例探究
js部分
window.onload = function() {
var timer = null;
var num = 0;
var i = 0;
var arr=['red','#FF9D0C','#DBFF0D','#3BFF0D','#0DFFA2','#0DE8FF','#0D52FF','#210DFF','#930DFF','#FF0DB4']
var start = document.getElementById('start');
var stop = document.getElementById('stop');
var prizeDraw = document.getElementById('prizeDraw');
start.onclick = function() {
clearInterval(timer);
timer = setInterval(function(){
num = Math.floor(Math.random()*100+1);
prizeDraw.style.backgroundColor = arr[i];
i++;
if (i==9) {
i = 0;
};
prizeDraw.innerHTML = num;
},100);
}
stop.onclick = function() {
clearInterval(timer);
}
}css部分
#prizeDraw {
width: 100px;
height: 100px;
background: rgba(255,68,253,0.5);
font-size: 30px;
text-align: center;
line-height: 100px;
}
html部分
<div id="prizeDraw"></div>
<input type="button" value="开始" id="start">
<input type="button" value="暂停" id="stop">代码分析：
在启动定时器之前，必须先执行清除操作。如果不先清除，每次点击启动按钮都会创建新的定时器，导致多个定时器同时运行，此时即使点击停止也无法完全停止所有定时器。
clearInterval() 函数可以接受 null 作为参数，不会报错。
本例展示了如何将内容存放在数组中进行循环应用。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！