JavaScript 定时器使用详解:语法、清除机制与抽奖实例

作者:半夏时间:2026-10-21 18:35:44浏览:482

本文详细介绍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 作为参数,不会报错。

本例展示了如何将内容存放在数组中进行循环应用。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持本站!

作者最新文章