javascript - 制作一键启动功能，一键停止功能

Question

我一直在尝试在我的网站上制作两个不同的按钮，一个用于启动功能，一个用于停止功能。但是，我不太了解 Javascript，只能设法使开始按钮起作用。停止按钮要么根本不执行任何操作，要么阻止启动功能激活。

这是它的 JavaScript

 var stop = 100000;
//No clue how to make it stop completely, so I just set it to a really big number

function startSwapping() {
    var int=self.setInterval(tSwap, imgNumber);
    var int=self.setInterval(twoSwap, imgNumberTwo);
    var int=self.setInterval(threeSwap, imgNumberThree);
    var int=self.setInterval(fourSwap, imgNumberFour);
    var int=self.setInterval(fiveSwap, imgNumberFive);
    var int=self.setInterval(sixSwap, imgNumberSix);
    var int=self.setInterval(sevenSwap, imgNumberSeven);
    var int=self.setInterval(eightSwap, imgNumberEight);
    var int=self.setInterval(nineSwap, imgNumberNine);
    var int=self.setInterval(tenSwap, imgNumberTen);

}

function stopSwapping() {
    var int=self.setInterval(tSwap, stop);
    var int=self.setInterval(twoSwap, stop);
    var int=self.setInterval(threeSwap, stop);
    var int=self.setInterval(fourSwap, stop);
    var int=self.setInterval(fiveSwap, stop);
    var int=self.setInterval(sixSwap, stop);
    var int=self.setInterval(sevenSwap, stop);
    var int=self.setInterval(eightSwap, stop);
    var int=self.setInterval(nineSwap, stop);
    var int=self.setInterval(tenSwap, stop);

}

以及 HTML 按钮本身

<button onclick="startSwapping()">Bring me pain</button> <button onclick="stopSwapping();">Have mercy</button>

如果有人知道我犯了什么愚蠢的错误，我将非常感谢任何帮助进行这次运行

Answer 1

这将完成您尝试做的事情...

// create an emtpy array to hold all the interval IDs
// This is declared outside function so they both can reference it
var intervalIds = [];

function startSwapping() {
    inervalIds.push(setInterval(tSwap, imgNumber));
    inervalIds.push(setInterval(twoSwap, imgNumberTwo));
    inervalIds.push(setInterval(threeSwap, imgNumberThree));
    inervalIds.push(setInterval(fourSwap, imgNumberFour));
    inervalIds.push(setInterval(fiveSwap, imgNumberFive));
    inervalIds.push(setInterval(sixSwap, imgNumberSix));
    inervalIds.push(setInterval(sevenSwap, imgNumberSeven));
    inervalIds.push(setInterval(eightSwap, imgNumberEight));
    inervalIds.push(setInterval(nineSwap, imgNumberNine));
    inervalIds.push(setInterval(tenSwap, imgNumberTen));
}

function stopSwapping() {
    // stop each interval you previously created
    for (var i = 0; i < intervalIds.length; i++) {
        clearInterval(intervalIds[i]);        
    }

    // clear the list of IDs
    intervalIds = [];
}

简而言之，它会像之前一样创建所有间隔，但会保留一个包含所有 ID 的数组，以便稍后可以停止它们。