如何使用if语句启动/停止和重置setInterval动画？

Question

I would like to be able to "play" an infinite/looping vertical scroll animation if the user scrolls past a certain distance. I would then like to stop this animation and reset the state, to the original/starting position, if the user scrolls back up past that distance.

I have a feeling it could be achieved with clearInterval , but can't quite get my head around it.

Here is my current code: HTML

<div id="list">

  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
  <span>Item 4</span>
  <span>Item 5</span>

</div> <!-- /.list -->

jQuery

const startCycle = () => {

  $('#list').stop().animate({ scrollTop: `${amount}px` }, 400, 'swing', function() {

    // update the order of the elements
    $(this).scrollTop(0).find('span:last').after($('span:first', this))

  })

}

const playAnimation = () => {

  const pixels = window.pageYOffset
  console.log("pixels:", pixels)

  if (pixels >= 30) {
    setInterval(startCycle, 1000)
  } else {
    clearInterval(startCycle)
  }

}

document.addEventListener("scroll", playAnimation)

Here is a link to view the pen: https://codepen.io/anon/pen/vMoJJe

Unfortunately, the current animation appears choppy or gets stuck with the above if statement, and then fails to stop with scroll up. The aim is to stop the animation and return it to its starting position, with the first span on display if the user is above a certain distance.

---

Initial code credit: Infinite vertical scroll div element

Answer 1

To clear an interval you have to save the return value of setInterval

const playAnimation = () => {

  const pixels = window.pageYOffset
  console.log("pixels:", pixels)

  let interval // declare the variable
  if (pixels >= 30) {
    interval = setInterval(startCycle, 1000) // save the interval ID
  } else {
    clearInterval(interval) // clear the interval ID
  }
}

Answer 2

The issue you have is that you are setting the interval more than once. Each time the scroll event is fired, an interval is started.

So, adding a boolean to make sure only one setInterval() is called at a time should fix your issue.

Edit: also, as Alex Wayne mentioned, you should save the interval in a variable in order to clear it later on.

Eg:

var interval;
var isIntervalSet = false;
const playAnimation = () => {

  const pixels = window.pageYOffset
  console.log("pixels:", pixels)

  if (pixels >= 30 && !isIntervalSet) {
    interval = setInterval(startCycle, 1000)
    isIntervalSet = true;
  } else {
    clearInterval(interval);
    isIntervalSet = false;
  }

}

document.addEventListener("scroll", playAnimation)