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

Question

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

亲切的问候，劳伦斯

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 变量设置在 function 之外或使其成为全局变量，这样它就不会创建重复的 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>