定时器开始按钮多次点击加快,为什么此时点停止按钮却停不下来?

定时器开始按钮多次点击加快,为什么此时点停止按钮却停不下来?

但是在运行之前加了清除就可以了,为什么会发生这样的现象???​

在<body>
         <h1 id='info'>0</h1>
         <button id ='bt1'>开始</button>
         <button id ='bt2'>暂停</button>
        
        <script>
            var info = document.getElementById('info');
            var bt1 = document.getElementById('bt1');
            var bt2 = document.getElementById('bt2');
            var a=0;
            var times;
            bt1.onclick = function(){
                // clearInterval(times);
                times = setInterval(function(){
                    info.innerHTML = ++a;
                },1000);    
            }
            bt2.onclick = function(){
                clearInterval(times);
            }
            </script>
            
    </body>

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,点击开始按钮,就会开启一个定时器,多次点击开始按钮,就会开启多个定时器,此时点击暂停是不能清除多个定时器的。

在开启定时器之前,就把上次开启的定时器清除,效果就是正常的。这个操作是很常用的,同学可以记一下。

  • 老师,请问一下多次点击暂停为什么不能清除多个定时器呢?里面是怎样的运行机制呢,不了解,还请老师帮忙解答,谢谢老师!

    2022-01-16 11:55:01
  • 同学你好,原因是在多次点击按钮时,会多次创建定时器,所以我们明面上会看到的效果是定时器越走越快,实际原因是会多次初始化定时器。也就是说我们看到的定时器越走越快,实际上是有多个定时器在执行(相当于是形成了一个任务队列),并且定时器里面的程序执行频率也会提高。然而由于无法遍历任务队列中的定时器,因此即便是点击多次清除定时器也只能清除最后一次定时器。由此,一般在写程序的时候,我们有以下处理方法:

    https://img1.sycdn.imooc.com//climg/61e3ae4b09ad018810250728.jpg

    希望可以帮到你,祝学习愉快!

    2022-01-16 13:48:25
  • 好像明白了,谢谢老师,也祝您生活愉快!

    2022-01-16 18:18:26
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师