清除范围之外的 jQuery 超时

Question

我有一个每 2400 毫秒触发一次“tic”的时钟。 在“tic”上，我希望我的父 div 的子级切换类，但不是同时切换：我使用它们父级的索引来及时偏移触发器，以便它以某种波的形式发生。 最重要的是，或者我应该从它开始，我不希望在用户滚动时发生这些。 我设法让我的容器停止使用 .off() 收听“tic”，但我似乎无法清除导致偏移量的超时。

这是一个 jsfiddle：https://jsfiddle.net/andinse/w878ft4z/7/

我是 jQuery 新手，有点迷失在这一切的嵌套中。

非常感谢任何帮助！

var $parents = $('.parents');
var $parent = $('.parent');
var $child = $('.child');

var $speed = 2400;
var $loopLength = 5;

setInterval(function clock() {
  $parents.trigger('tic');
}, $speed);

$.fn.play = function() {
  $(this).on('tic', function() {
    $child.each(function() {
      var $that = $(this);
      var $offset = ($that.parent().index() % $loopLength) * $speed / $loopLength;
      setTimeout(function() {
        $that.toggleClass('special');
      }, $offset);
    });
    return this;
  });
};

$parents.play();

$(document).scroll(function() {
  $parents.off('tic');
  clearTimeout($.data(this, 'scrollTimer'));
  $.data(this, 'scrollTimer', setTimeout(function() {
    $parents.play();
  }, 200));
});

Answer 1

这是你的 sn-p 的一个版本，它在你的嵌套之外定义私有数组，然后将唯一的 timeOuts 分配给数组位置，然后按顺序清除和重新建立：

var $parents = $('.parents');
var $parent = $('.parent');
var $child = $('.child');

var $speed = 2400;
var $loopLength = 5;
var toc = [], 
		$that = [], 
    $offset = [];	// define global arrays

setInterval(function clock() {
  $parents.trigger('tic');
}, $speed);

$.fn.play = function() {
  $(this).on('tic', function() {
    $child.each(function(i) {
      $that[i] = $(this);
      $offset[i] = ($that[i].parent().index() % $loopLength) * $speed / $loopLength;
      toc[i] = setTimeout(function() { // define individual timeouts
        $that[i].toggleClass('special');
      }, $offset[i]);
    });
    return this;
  });
};

$parents.play();

$(document).scroll(function() {
  $parents.off('tic');
  clearTimeout($.data(this, 'scrollTimer'));
  $.each(toc,function(i){
    clearTimeout(toc[i]);	// specify each of the timeouts to clear
  });
  $.data(this, 'scrollTimer', setTimeout(function() {
    $parents.play();
    $.each(toc,function(i){
      toc[i] = setTimeout(function() { // resume each of the timeouts
        $that[i].toggleClass('special');
      }, $offset[i]);
		});    
  }, 200));
});

* {
  margin: 0;
  padding: 0;
}

.parent {
  background: red;
  height: 25px;
  width: 250px;
  padding: 5px;
  margin: 5px;
}

.child {
  background: pink;
  height: 100%;
  width: 100%;
}

.special {
  background: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parents">
  <div class="parent"><div class="child"></div></div>
  <div class="parent"><div class="child"></div></div>
  <div class="parent"><div class="child"></div></div>
  <div class="parent"><div class="child"></div></div>
  <div class="parent"><div class="child"></div></div>
  <div class="parent"><div class="child"></div></div>
  <div class="parent"><div class="child"></div></div>
  <div class="parent"><div class="child"></div></div>
  <div class="parent"><div class="child"></div></div>
  <div class="parent"><div class="child"></div></div>
  <div class="parent"><div class="child"></div></div>
  <div class="parent"><div class="child"></div></div>
  <div class="parent"><div class="child"></div></div>
  <div class="parent"><div class="child"></div></div>
  <div class="parent"><div class="child"></div></div>
  <div class="parent"><div class="child"></div></div>
</div>