Question

我的代码有点问题。

我进行了设置，因此默认情况下，旋转的fadeIn fadeOut滑块会自动播放，当用户点击li时，它会跳转到'slide'并暂停滑块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);
}

Answer 1

您可以清除click事件内部的间隔。

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

//Your other code

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

Answer 2

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

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

Setinterval

2 个答案: