老师为什么我点击多次后,速度越来越快?

老师为什么我点击多次后,速度越来越快?

    // 页面延时加载
    window.onload = function () {
        // 存储数值
        var text = "<span>hello</span>";
        // 获取容器
        var div = document.getElementsByTagName('div')[0];
        // 获取按钮
        var btn = document.getElementById('btn');
        // 按钮绑定事件
        btn.onclick = function () {
            // 间隙调用定时器
            setInterval(function () {
                // 每次在原来基础上追加 后面新加入的。
                div.innerHTML += text + '  ';
            },500)
        }
    }


正在回答 回答被采纳积分+1

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

3回答

哥们就是说:

你点击一下就生成第一个计时器 timer1

你点击两下就生成第二个计时器 timer2

你点击三下就生成第三个计时器 timer3

说白了就是3个计时器在运行,也就是说有三个函数前后同时在页面打印,页面显示就会越来越快。

为了让页面正常显示,不管我们点击几次,要保证只有一个计时器在运行。那么页面就可以正常显示了。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <textarea name="" id="text" cols="30" rows="30"></textarea>
  <input type="button" id="btn" value="点击">
  <script>
      var timer=null;//计时器对象
      var text=document.getElementById('text');//获取文本域对象
      document.getElementById('btn').onclick=function(){//点击按钮开始执行函数
        if(timer){//计时器存在
          return;//如果计时器存在,则代码不往下执行。让已经存在的计时器继续执行
        }else{//如果计时器不存在,则开始执行文本域操作
          timer = setInterval(function(){
            text.value+="abcd  ";
          },1000)
        }
        
      }
  </script>
</body>
</html>

你可以看下我代码的注释,很好理解的,加油!!!望采纳!!!!!!

好帮手慕慕子 2019-05-14 21:51:22

同学你好, 可以在每次点击的时候,判断页面中是否有未完成的定时器, 如果有未完成的话, 就先清除当前的定时器, 然后再重新开启定时器。 这样可以保证每次点击的时候页面中只有一个定时器哦~ 示例:

http://img1.sycdn.imooc.com//climg/5cdac75a0001b00e17941342.jpg

同学可以结合示例自己下去测试一下, 加深自己的理解

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

好帮手慕慕子 2019-05-14 18:04:46

同学你好, 因为每次点击都会开始一个定时器, 但是没有清除上一个定时器,就又开始了下一个定时器,导致速度越来快。

可以声明一个变量, 用来表示当前的定时器是否执行完。 示例: 默认开启定时器, 当点击的时候如果flag置为true, 然后开启一个定时器, 执行完成后, 将flag置为false, 否则的话, 清除定时器, 将flag值为true。 示例:

http://img1.sycdn.imooc.com//climg/5cda929f0001113c07600532.jpg

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

  • 提问者 007号学员 #1
    有点绕。。。听不明白。而是感觉很多东西都没说到。只是说了一些简单的东西
    2019-05-14 19:52:59
  • 好帮手慕慕子 回复 提问者 007号学员 #2
    同学你好,抱歉老师在解释的时候表达不够简练,给同学造成了困扰。 这里是因为每点击一次按钮就会执行函数中的代码,开启一个定时器。连续多次点击会开启多个定时器,导致浏览器解析的时候发生异常现象。 老师给出的示例:可以理解为使用一个变量,通过if判断控制点击按钮的时候是否开启定时器。防止连续点击的时候开启多个定时器。
    2019-05-14 21:46:11
  • 慕的地1078645 回复 提问者 007号学员 #3
    不是讲的很清楚吗,,,
    2019-05-27 17:05:41
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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