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个，依此类推。我什至尝试在单击开始按钮之前和之后将间隔设置为null。同样，只要间隔处于运行状态，开始按钮就会隐藏。我想完全破坏上一个间隔，以便在按t开始按钮时仅触发一个间隔。我需要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>

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

1 个答案: