js解决多次点击触发定时器越走越快的问题

定时器的使用

let btn = document.querySelector('button'); 
    btn.addEventListener('click', function() {  
        setInterval(function() {       
            console.log("1s");
        }, 1000)
    })

    let btn = document.querySelector('button');
    btn.addEventListener('click', function() {
        setTimeout(function() {
            console.log("1s");
        }, 1000)
    })

从例子的描述其实可以看出来，使用 setInterval() 时，每1秒输出一次，而使用 setTimeout() 时，只会在第一个1秒后输出一次，即

• setInterval() 会执行多次
• setTimeout() 只会执行一次

setTimeout() 只会执行一次，所以不会出现越走越快的问题；那么这个问题就只讨论 setInterval() 的情况。

 

定时器越走越快的原因

在上述例子中，本应每1秒输出一次，但在多次点击按钮后会变成每0.9秒、0.8秒、0.7秒… 就输出一次，即定时器时间间隔越来越短，这就是所谓的定时器越走越快。

其实原因很简单，在多次点击按钮时，多次创建了定时器，所以明面上看是“定时器越走越快”，其实是“多次初始化定时器”。
所以并不是定时器越走越快，而是有多个定时器在执行，定时器里面的程序执行的频率提高了。

 

解决定时器越走越快的问题

方式一：因为问题出现在“多次初始化定时器”，那就要在每次初始化定时器之前先执行清除操作，保证只有一个定时器在执行，就不会出现这样的问题了。

    let btn = document.querySelector('button');
    let time;
    btn.addEventListener('click', function() {
        clearInterval(time); //清除之前的定时器
        time = setInterval(function() { //初始化现在的定时器      
            console.log("1s");
        }, 1000)
    })

 

方式二：添加一个开关,让这个开关默认为true，第一次点击将其变为false，点击事件的执行需要判断这个开关是否为true，为true执行，false不执行。

解决多次点击问题，定时器执行完毕之后再继续执行下一个定时器。

    let btn = document.querySelector('button');
    var time;var fls = true
    btn.addEventListener('click', function() {
      if (fls){
          fls = false
          time = setInterval(function() {
              console.log('1s')
          }, 1000)
      }
    })