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

    // 页面延时加载
    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)
        }
    }

007号学员 2019-05-14

源自：JS BOM基础 1-26 编程练习

收起

3回答

qq_一切都是最好的安排_1 2019-05-21 10:12:49

哥们就是说：

你点击一下就生成第一个计时器 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

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

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

如果帮助到了你，欢迎采纳！

祝学习愉快~~~

收起回答

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

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

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

如果帮助到了你，欢迎采纳！

祝学习愉快~~~

收起回答

提问者 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