How do I reference a variable for clearInterval in a different function?

Question

I have a circular image I want to spin with a button click and stop with a different button click.

The spin() function works, but the stop() does not because the values die outside of the spin() function (correct me if I'm wrong). How should I solve this? I'm open to using the same button to spin and stop, but my if else statement produces the same result - spinning the image works, but I can't stop it.

Another unintended bug is that if I click on the spin button more than once, the spinning gets faster.

Here's my code:

var spinImage;  
function spin(){

        spinImage = document.getElementById('spinImage'), degree = 0;
        setInterval(function() {
        spinImage.style.transform = "rotate(" + ++degree + "deg)";}, 1);
}

function stop(){
        clearInterval(spinImage);
}

I need to stick to plain javascript and use the setInterval/clearInterval methods.

Answer 1

You need to remember the interval id, so that you can stop it.

let intervalId = null;

function spin() {
  spinImage = document.getElementById('spinImage'), degree = 0;

  intervalId = setInterval(function() {
    spinImage.style.transform = "rotate(" + ++degree + "deg)";
  }, 1);
}

function stop() {
  clearInterval(intervalId);
}

---

ES6 Class

You can encapsulate this logic into a reusable class object i.e. ImageSpinner.

const main = () => {
  const spinner = new ImageSpinner('#spinImage');

  addEventListeners('.btn-toggle', 'click', (e) => {
    spinner.toggle();
    let attr = `data-text-${spinner.isRunning() ? 'off' : 'on'}`;
    e.currentTarget.textContent = e.currentTarget.getAttribute(attr);
  });

  addEventListeners('.btn-reset', 'click', (e) => {
    spinner.reset();
    let btn = document.querySelector('.btn-toggle');
    btn.textContent = btn.getAttribute('data-text-on');
  });
}

class ImageSpinner {
  constructor(selector, rate) {
    /* @protected */ this.image = document.querySelector(selector);
    /* @protected */ this.rate = rate;
    /* @private   */ this.__intervalId = null;
    /* @private   */ this.__degree = 0;
  }
  /* @public */ isRunning() {
    return this.__intervalId != null;
  }
  /* @public */ reset() {
    if (this.isRunning()) this.stop();
    this.__degree = 0;
    this.__rotate();
  }
  /* @public */ start() {
    if (!this.isRunning()) {
      this.__intervalId = setInterval(() => { this.update() }, this.rate);
    } else {
      console.log('Already running...');
    }
  }
  /* @public */ stop() {
    if (this.isRunning()) {
      clearInterval(this.__intervalId);
      this.__intervalId = null;
    } else {
      console.log('Not currently running...');
    }
  }
  /* @public */ toggle() {
    this.isRunning() ? this.stop() : this.start();
  }
  /* @protected */ update() {
    this.__degree = (this.__degree + 1) % 360;
    this.__rotate();
  }
  /* @private */ __rotate() {
    this.image.style.transform = "rotate(" + this.__degree + "deg)";
  }
}

/*
 * Can either be an object of event handlers,
 * or an event name followed by a function.
 */
function addEventListeners(elementsOrSelector, events) {
  ((els) => els.forEach(el => 
    (typeof events === 'string' && arguments.length > 2)
      ? el.addEventListener(arguments[1], arguments[2])
      : Object.keys(events)
        .forEach(name => el.addEventListener(name, events[name]))))
  (Array.from((typeof elementsOrSelector === 'string')
    ? document.querySelectorAll(elementsOrSelector)
    : elementsOrSelector.entries
      ? elementsOrSelector
      : [elementsOrSelector]));
}

main(); // Execute main function

body {
  background: #222;
  padding: 1.25em;
}

img {
  border: 2px dotted white;
  margin-left: 0.5em;
}

.btn-wrapper {
  margin-top: 1.75em;
}

.btn-toggle {
  display: inline-block;
  width: 64px;
  cursor: pointer;
}

<img id="spinImage" src="https://lh5.googleusercontent.com/-ajlbNdBMWwA/AAAAAAAAAAI/AAAAAAAAAAo/ND2LpoxaqAQ/photo.jpg?sz=96" alt="" width="96" height="96"/>
<div class="btn-wrapper">
  <button class="btn btn-toggle" data-text-on="Start" data-text-off="Pause">Start</button>
  <button class="btn btn-reset">Reset</button>
</div>

Answer 2

<!DOCTYPE html>

  <head>
    <title>Spin</title>
  </head>
  <body>

    <button id='spinStart'>Start</button>
    <button id='spinStop'>Stop</button>

    <script>
      var spinning = false;
      var handle;
      var counter = 0;

      // Add click event listener to the start button
      window.document.getElementById('spinStart').addEventListener("click", start);
      // Add click event listener to the stop button
      window.document.getElementById('spinStop').addEventListener("click", stop);

      function start() {

        if(spinning === true) {
          console.log('spinning already')
          // Do nothing here as it's already spinning.
          spinning = !spinning;
        } 

        if(spinning === false) {
          // Not spinning here, so we have to init the setInterval
          handle = setInterval(() => {
            console.log(counter);
            counter++;
          }, 1000);
          spinning = !spinning;
        }
      }

      function stop() {
        //We only want to stop the spinner if it's actually spinning
        if(spinning === true){
          console.log('clearing the interval now!');
          clearInterval(handle);
        }
      }
    </script>
  </body>
</html>

Substitute your code as fits.

Answer 3

You need to get the id when initializing setInterval (here store in spin variable). That variable will have reference to setInterval so that you can clear it up using stop function.

Another unintended bug (faster spinning on consecutive clicks) is due to the fact that, previous setInterval id is not cleared and new one is created. So, the number of times you click; you will have that many setIntervals. To avoid it, you need to clear up the existing id and then re-initialize with the new set interval.

Have fixed the code. Please see:

var spinImage;
var spin;  
function spin(){
    spinImage = document.getElementById('spinImage');
    degree = 0;
    if(spin) stop();
    spin = setInterval(function() {
        spinImage.style.transform = "rotate(" + ++degree + "deg)";
    }, 1);
}

function stop(){
    clearInterval(spin);
}

Hope it helps. Revert for any doubts/clarifications

Answer 4

the value you are looking for is the return value of setInterval:

var intervalId;
function spin() {
  var spinImage = document.getElementById('spinImage');
  var degree = 0;
  intervalId = setInterval(function() {
    spinImage.style.transform = 'rotate(' + ++degree + 'deg)';
  }, 1);
}

function stop() {
  clearInterval(intervalId);
}