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

Question

如果用户滚动超过一定距离，我希望能够“播放”无限/循环的垂直滚动动画。 然后，如果用户向后滚动超过该距离，我想停止该动画并将状态重置为原始/开始位置。

我感觉可以使用clearInterval来实现，但是不能完全理解。

这是我当前的代码：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)

这是查看笔的链接： https : //codepen.io/anon/pen/vMoJJe

不幸的是，当前动画显得不稳定或卡在上面的if语句中，然后无法停止并向上滚动。 目的是停止动画并将其返回到其起始位置，如果用户超过一定距离，则显示第一个span 。

---

初始代码信用： 无限垂直滚动div元素

Answer 1

要清除间隔，您必须保存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

您遇到的问题是您要不止一次设置间隔。 每次触发scroll事件时，都会启动一个间隔。

因此，添加一个布尔值以确保一次仅调用一个setInterval()应该可以解决您的问题。

编辑：同样，正如Alex Wayne提到的那样，您应该将间隔保存在变量中，以便以后清除它。

例如：

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)