Setinterval 的多个实例

Question

我的代码有点问题。

我已经设置好，默认情况下，旋转的淡入淡出滑块会自动播放，当用户点击一个 li 时，它会跳到那个 'slide' 并将滑块暂停 x 次时间.

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

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

提前致谢！

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

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

的任何实例

或

我需要它而不是运行ning color1 在 var reset 中，我将直接进入 colorInterval 而不是运行ning color1() for each li clicked,

所以运行 colorInterval 在 var 重置 x 时间后。

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);
}

Answer 1

玩的一件事是 jQuery 动画有一个伪 class 选择器 :animated 当动画正在进行时

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

Answer 2

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

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

//Your other code

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

Setinterval 的多个实例

Multiple instances of Setinterval

javascript

jquery

setinterval