clearInterval(intervalId) 只是停止间隔，并没有真正清除它

Question

我不太确定如何解决这个问题，因为我不明白我做错了什么 - 所以，每次我点击创建的“开始”按钮时，都会触发一个 setInterval：

$("#questBox").on("click", "#startQuestButton", function(){
    document.getElementById("startQuestButton").classList.add("hidden");
    var requiredTime = 10000;
    var timer = 0;

    var interval = setInterval(function(){
        if(timer>requiredTime){
            clearInterval(interval)
            document.getElementById("startQuestButton").classList.remove("hidden");
        }
        timer+=1000; 
    }, 1000);
}

startQuestButton 是一个 div，存在于我的 html 文件中：

<div id="startQuestButton"></div>

现在，当我第二次点击开始按钮时，会触发 2 个相同的 setIntervals，第三次点击 3 个，依此类推。 我什至尝试在单击开始按钮之前和之后将间隔设置为空。此外，只要间隔正在进行，开始按钮就会隐藏。我想完全破坏前一个间隔，以便在我按下开始按钮时只触发一个。 我需要 setInterval 来显示一个进度条，它模仿一个加载条（因此，每秒钟，彩色元素的宽度都会放大几个像素）。

Answer 1

那是因为 setInteval() 不返回区间对象（不存在这样的东西 afaik）但它是 id 所以当你清除时，你只清除最后一个创建的，因为它是保存在interval中的id

var requiredTime = 2000;
var timer = 0;

var interval

function createInterval() {
  interval = setInterval(function(){
      if(timer>requiredTime){
          console.log(`cleared interval : ${interval}`)
          clearInterval(interval)
      }
      timer+=500; 
  }, 500);
  console.log(`created interval : ${interval}`)
}

document.getElementById("b").onclick = createInterval

<button id="b">clickMe</button>

一次只有一个想法是在重新创建之前清除

var requiredTime = 2000;
var timer = 0;

var interval

function createInterval() {
  // as pointed by Barmar the if here is not useful in production since clearInterval with a parameter that is not an interval id do nothing silently
  // I only keep it to prevent this snippets to log "cleared interval : undefined"
  if(interval) {
    clearInterval(interval)
    console.log(`cleared interval : ${interval}`)
  }
  
  interval = setInterval(function(){
      if(timer>requiredTime){
          clearInterval(interval)
          console.log(`cleared interval : ${interval}`)
      }
      timer+=500; 
  }, 500);
  console.log(`created interval : ${interval}`)
}

document.getElementById("b").onclick = createInterval

<button id="b">clickMe</button>