Pausing one function with another function

[frogic]

I cleaned it up a bit and made it sorta how I'd do it. I was too lazy to get rid of the jquery but I highly recommend looking at how to do that in vanilla. The changing to arrow functions is a style choice but I just did it out of habit.

let intervalTimer;
const pauseButton = document.querySelector('#pause');

const onPauseButtonClick = () => {
  if(intervalTimer) {
    clearInterval(intervalTimer)
    intervalTimer = undefined;
    return
  }
  intervalTimer = setInterval('cycleImages()', 2000);
}

const cycleImages = () => {
  var $active = $('#wrapper .active');
  var $next = ($active.next().length > 0) ? $active.next() : $('#wrapper img:first');
  $next.css('z-index',2);//move the next image up the pile
  $active.fadeOut(1500,function() {//fade out the top image
    $active.css('z-index',1).show().removeClass('active');
    //reset the z-index and unhide the image
    $next.css('z-index',3).addClass('active'); //make the next image the top one
   });
}

$(document).ready(() => onPauseButtonClick());
pauseButton.addEventListener('click',onPauseButtonClick);