定时器开启和关闭

最新推荐文章于 2024-04-26 09:56:33 发布

微笑、不失礼471

最新推荐文章于 2024-04-26 09:56:33 发布

阅读量2.7k

点赞数 1

文章标签： javascript 前端 html html5

本文链接：https://blog.csdn.net/weixin_55711841/article/details/125899246

版权

<body>
<p id="p1">点击改变字体颜色</p>
<button id="b1" οnclick="start1()">开启定时器</button>
<button id="b2" οnclick="close1()">关闭定时器</button>
<script>
//如果定时器开启时候在按钮点击事件里面，每点击一次，都开启了一个定时器，所以定时器频率会变快
//其实目的就是为了点击时加上一个判断，防止用户高频率的点击按钮
var timer //定时器
function start1(){
   //如果定时器存在，if条件不走，如果定时器不存在，再从新开启一个定时器
   if (timer==null){
       timer = setInterval(function(){
           p1.style.color=`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`
       },16.67)
   }
}
关闭定时器
function close1(){
   //timer存在的前提下再去清空定时器
   if(timer!=null){
       clearInterval(timer)//关闭定时器但是timer这个变量还存在，关闭定时器之后需要把timer置为空
       timer=null
   }
}
</script>
</body>