如何使用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如果用户超过一定距离，则显示第一个动画。

Answer 1

要清除间隔，您必须保存的返回值 setIntervalconst playAnimation = () => {&nbsp; const pixels = window.pageYOffset&nbsp; console.log("pixels:", pixels)&nbsp; let interval // declare the variable&nbsp; if (pixels >= 30) {&nbsp; &nbsp; interval = setInterval(startCycle, 1000) // save the interval ID&nbsp; } else {&nbsp; &nbsp; clearInterval(interval) // clear the interval ID&nbsp; }}

Answer 2

您遇到的问题是您要不止一次设置间隔。每次scroll触发事件时，都会启动一个间隔。因此，添加一个布尔值以确保一次setInterval()只调用一个布尔值应该可以解决您的问题。编辑：同样，正如Alex Wayne提到的那样，您应该将间隔保存在变量中，以便以后清除它。例如：var interval;var isIntervalSet = false;const playAnimation = () => {&nbsp; const pixels = window.pageYOffset&nbsp; console.log("pixels:", pixels)&nbsp; if (pixels >= 30 && !isIntervalSet) {&nbsp; &nbsp; interval = setInterval(startCycle, 1000)&nbsp; &nbsp; isIntervalSet = true;&nbsp; } else {&nbsp; &nbsp; clearInterval(interval);&nbsp; &nbsp; isIntervalSet = false;&nbsp; }}document.addEventListener("scroll", playAnimation)