Javascript/Toggle/Switch/clearInterval() - 切换关闭时无法 clearInterval()

Question

哇，这是我的第一篇文章!编程和编码的新手，这是我从事的第一个项目。我希望能够使用 setInterval() 来切换开关以运行代码或停止它。但是现在我无法在选择切换开关时将其关闭。尝试了多种方法，比如 break；但到目前为止还没有成功。如果你们中的任何人能指出我正确的方向，那就太好了。

亲切的问候，劳伦斯

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);

代码运行；

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>