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)
      }
    })