Setinterval 的多个实例答案

【问题标题】：Multiple instances of SetintervalSetinterval 的多个实例
【发布时间】：2023-03-16 15:16:01
【问题描述】：

我的代码有点问题。

我已经设置好了，默认情况下，一个旋转的 fadeIn fadeOut 滑块是自动播放的，当用户点击一个 li 时，它会跳到那个“幻灯片”并暂停滑块 x 时间。

我遇到的问题是，如果用户点击多个 li 的速度非常快，那么它将多次运行 color1() 并多次启动 colorInterval。这会产生不希望的效果。

所以我需要帮助的是弄清楚每次单击 li 时如何重置我的代码，所以每当单击 ColorClick 时，我想确保在开始新的之前没有其他 colorInterval 实例.

提前致谢！

==================================

编辑：我现在有另一个问题，我相信我解决了 clearInterval 问题，但是现在如果您查看 var reset，您会看到每次单击 li 时它都会运行 color1()，它会运行多个间隔，所以我需要每次调用 color1() 时都删除它的前一个实例，以确保它不会多次重复其中的任何代码。因此，当单击 li 时，删除 color1() 的所有实例

或

我需要这样，而不是在 var reset 中运行 color1，我将直接转到 colorInterval，而不是为每个点击的 li 运行 color1()，

所以在 var reset 中经过 x 时间后运行 colorInterval。

function color1() {
  var pass = 0;
  var counter = 2;
  var animationSpeed = 500;

  var $colorContent = '.color-container-1 .color-content-container'

  var $li = '.color-container-1 .main-color-container li'

  $($li).on('click', function() {
    colorClick($(this));
  });

  function colorClick($this) {
    var $getClass = $this.attr("class").split(' ');
    var $whichNumber = $getClass[0].substr(-1);
    var $Parent = '.color-container-1 ';

    pass = 1;
    $($colorContent).fadeOut(0);
    $($colorContent + '-' + $whichNumber).fadeIn(animationSpeed);

    var reset = setTimeout(function() {
      clearTimeout(reset);
      pass = 0;
      color1();
    }, 10000);
  }



  var colorInterval = setInterval(function() {

    if (pass > 0) {
      clearInterval(colorInterval);
      return; //stop here so that it doesn't continue to execute below code
    }

    $($colorContent).fadeOut(0);
    $(($colorContent + '-' + counter)).fadeIn(animationSpeed);
    ++counter

    if (counter === $($colorContent).length + 1) {
      counter = 1;
    }

  }, 7000);
}

【问题讨论】：

标签： javascript jquery setinterval

【解决方案1】：

您可以清除点击事件中的间隔。

var colorInterval;
$($li).on('click', function() {
    clearInterval(colorInterval);
    colorClick($(this));
});

//Your other code

colorInterval = setInterval(function() {
//Rest of your code
});

【讨论】：

这并不能解决它，发生的事情是，每次单击 var reset 都会运行 color1() ，因此每次单击 li 都会运行 click1() ，这将启动多个间隔。所以我需要一种方法在 var reset 中只调用 color1() 一次，如果多次单击 li，则删除 color1() 的前一个实例。@joe
我同意这里所说的原则。您需要将当前运行的区间存储在所有代码都可以看到的地方，然后，当您想要启动另一个区间时，检查该变量，如果它不为空，则清除现有区间。
这是有道理的，但仍然给我留下一个问题，在我单击一个 li 后，var reset 运行设置 pass = 0;这允许 colorInterval 运行，但我需要一种重新启动 colorInterval 的方法。我现在正在做的是再次运行 color1() 并生成许多 colorInterval 实例，它多次运行我的所有代码，即使我清除了以前的 colorInterval，我的代码仍然运行多次。所以我需要在 var reset 中启动 colorInterval，方法是清除 color1() 的所有实例，或者调用 colorInterval，我不知道该怎么做。 @frodo2975
您可以将 colorInterval = setInterval... 包装成一个函数并在重置时调用它，而不是再次调用 color1()。
修复了！非常感谢，还有其他提供答案的人！ @乔

【解决方案2】：

当动画正在进行时，jQuery 动画有一个伪类选择器:animated

if(!$('.your-slide-class:animated').length){
   // do next animation
}

【讨论】：