如何使setInterval方法只运行一个实例

时间:2018-03-03 04:34:02

标签: javascript html

我有一个按钮,当点击它时,启动一个计时器并将整数减少1每秒。 但是,如果多次单击该按钮,则由于多次调用setInterval,整数会每秒减少1次以上。

如何制作它,即使多次单击按钮,定时器每秒只会下降1(我不想禁用按钮)。

var time = document.getElementById("time");
document.getElementById("Btn").addEventListener("click", () => {
  var decreaseTime = setInterval(() => {
            if (time.textContent != 0) {
                time.innerHTML = time.textContent - 1;
            }
        }, 1000);

   if (time.textContent == 0) {
            clearInterval(decreaseTime);
        }
});

1 个答案:

答案 0 :(得分:0)

您应该在更高的范围内定义您的decreaseTime变量,然后在定义间隔之前检查它是否存在。例如:

var time = document.getElementById("time");
decreaseTime = undefined;
document.getElementById("Btn").addEventListener("click", () => {
  if(!decreaseTime){
    decreaseTime = setInterval(() => {
      if (time.textContent != 0) {
        time.innerHTML = time.textContent - 1;
      }
    }, 1000);

    if (time.textContent == 0) {
      clearInterval(decreaseTime);
    }
  }
});