间隔开始两次

Question

当用户单击按钮时，间隔将开始计数，但问题是，如果用户单击按钮两次，则会出现两个我尝试过的间隔

clearInterval(interval);

在分配间隔之前，但计时器停止计数。

function times(){
    var element=document.getElementById("sec");
    counter=0;
    
    let interval= setInterval(myFunction, 1000);
        function myFunction(){
            counter++;
            element.innerHTML=counter;
        }

}

Answer 1

document.querySelector('#sec').addEventListener('click', function() {
  times();
})

let interval;
let counter = 0;

function times() {
  clearInterval(interval);
  interval = setInterval(myFunction, 1000);
  counter = 0;
}

function myFunction() {
  var element = document.getElementById("sec");
  counter++;
  element.innerHTML = counter;
  console.log(counter);
}

<button id="sec">timer</button>

Answer 2

您可以尝试以下方法。根据

interval

的存在，决定是否（重新）启动计时器或停止计时器。

let interval

function times(){
    var element=document.getElementById("sec");
    counter=0;
    
    if (interval) {
        clearInterval(interval)
        interval = null
    } else {    
        function myFunction(){
            counter++;
            element.innerHTML=counter;
        }
        element.innerHTML=counter; // just to show '0' when re-starting
        interval= setInterval(myFunction, 1000);
    }
}

<button onclick="times()">Start / Stop</button>

<span id="sec">0</span>

Answer 3

如果想要在用户单击时清除先前设置的间隔，只需将间隔 ID 存储在更高的范围中，并在创建新间隔之前清除先前设置的间隔即可。

let interval 
function times(){
    clearInterval(interval);
    
    var element=document.getElementById("sec");
    counter=0;

    interval = setInterval(myFunction, 1000);
    
    function myFunction(){
        counter++;
        element.innerHTML=counter;
    }
}