如何使用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

要清除间隔，您必须保存的返回值 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)