Javascript / 切换 / 开关 / clearInterval() - 在切换关闭时无法使用 clearInterval()

Question

哇，这是我的第一篇帖子！我刚开始接触编程和编码，这是我工作的第一个项目。我想用setInterval()开关来运行代码或停止它，但是现在当选择切换时无法关闭它。尝试了多种方法，例如break;但迄今为止没有成功。如果你们中的任何人能指点我正确的方向，那就太好了。

此致敬礼， Laurens

HTML代码

<card>
<p>Theft Script ON/OFF</p>
<label class="switch">
<input id="executeTheftScript" type="checkbox" > Toggle me
</label>
</card>

Javascript 代码

function theftToggle(){
    var isChecked = document.getElementById("executeTheftScript").checked;
    if (isChecked) {
        var i = setInterval(function(){
            if (person1.credits === 0) {
                clearInterval(i);
                updateStats();
                console.log("You don't have any credits.");
            } else {
                theft();
                person1.credits--;
                updateStats();
            };
        }, 500);
    } else {
        console.log("Your script is stopped.");
    }
}

document.getElementById("executeTheftScript").addEventListener('click', theftToggle);

代码的运行；

- Laurens

---

你好，你的代码中theftToggle()函数调用在哪里？能否提供更多关于“toggling”按钮的信息？在分析结果问题之前了解更改情况非常重要。 - sohaieb azaiez

@sohaieb 谢谢你的回复。我已经添加了更多的内容，这些信息是否足够？ - Laurens

你好Laurens，欢迎你，很抱歉我来晚了，看到你的问题已经得到解答了，我为此感到高兴 ^_^ - sohaieb azaiez

Answer 1

你需要使用 addEventListener 来监听输入事件，并最好将 setInterval 变量设置在函数外部或全局作用域中，以避免创建重复的 setInterval。

var interval;
var person1 = {
  credits: 10
}
 
// listen the input for checked change
document.getElementById("executeTheftScript").addEventListener('change', theftToggle);

function theftToggle() {
  var isChecked = document.getElementById("executeTheftScript").checked;
  if (isChecked) {
    interval = setInterval(function() {
      if (person1.credits === 0) {
        clearInterval(interval);
        updateStats();
        console.log("You don't have any credits.");
      } else {
        theft();
        person1.credits--;
        updateStats();
      }
    }, 500);
  } else {
    clearInterval(interval)
    console.log("Your script is stopped.");
  }
}

function theft() {}

function updateStats() {
  console.log("credits: ", person1.credits);
}

<card>
  <p>Theft Script ON/OFF</p>
  <label class="switch">
    <input id="executeTheftScript" type="checkbox"> Toggle me
  </label>
</card>

- uingtea

---

嗨Uingtea，感谢你的回复。我尝试了你建议的更改，但不幸的是并没有成功。我仍然无法关闭脚本，所以循环会一直进行，直到没有信用为止。 - Laurens

我看到你的问题已经更新了，但是我仍然认为setInterval变量或者var i = setInterval(...应该在函数外面，就像我的回答一样。 - uingtea

它起作用了，我没有删除我的document.getElementById("executeTheftScript").addEventListener('click', theftToggle);..一旦删除，它就起作用了！ - Laurens