清除范围之外的jQuery超时

Question

我有一个时钟，每2400毫秒触发一个'tic'。 在'tic'，我希望我的父div的子节点toggleClass，但不是所有的同时：我使用它们的父级索引来及时抵消触发器，因此它发生在某种波形中。 除此之外，或者我应该开始使用它，我希望在用户滚动时不会发生这种情况。 我设法让我的容器停止用.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

这是您的代码段的一个版本，它定义了您的巢之外的私有数组，然后在按顺序清除和重新建立之前为数组位置分配唯一的timeOuts：

＆＃13;

＆＃13;

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

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;