Making one button to start a function, and one button to stop a function

I've been trying to make two different buttons on my site, one to start the functions and one to stop them. However, I don't know Javascript very well and have only managed to make the start button work. The stop button either does nothing at all, or blocks the start function from even activating.

Here's the javascript for it

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

}

And the HTML buttons themselves

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

if anyone knows what silly mistake I made, I would greatly appreciate any help making this run

2 answers

  • answered 2019-10-15 14:27 nicholas labrecque

    you need to store your intervals and then to stop them with clearInterval(interval)

    var counter = $('span.counter');
    var time = 0;
    var interval;
    
    function start(){
      interval = setInterval(()=>{
        time++;
        $(counter).html('Time Passed: '+time);
      }, 1000);
    }
    
    function stop() {
      clearInterval(interval);
      time = 0;
      $(counter).html('Stopped');
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <button onClick="start()">Start</button>
    <button onClick="stop()">Stop</button>
    <span class="counter"></span>

  • answered 2019-10-15 14:28 Archer

    This will do what you've tried to do...

    // 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 = [];
    }
    

    In short it creates all the intervals as you previously did, but keeps an array that holds all the IDs so they can be stopped later.