Очистка тайм-аута jQuery за пределами области видимости

Question

У меня есть часы, которые запускают «тик» каждые 2400 мс. В 'tic', я хочу, чтобы дети моих родительских divs были toggleClass, но не все одновременно: я использую индекс своего родителя для смещения триггера во времени, так что это происходит в какой-то волне. Кроме того, или, может быть, я должен начать с этого, я хочу, чтобы все это не происходило во время прокрутки пользователя. Мне удалось достать мой контейнер, чтобы перестать слушать «tic» с .off(), но я не могу показать очистка тайм-аута, который отвечает за смещение.

Вот 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

Это версия вашего сниппета, который определяет отдельные массивы за пределами ваших гнезд, а затем присваивает уникальные таймауты позиции массива, перед очисткой и восстановив в последовательности:

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

 
var $speed = 2400; 
 
var $loopLength = 5; 
 
var toc = [], 
 
\t \t $that = [], 
 
    $offset = []; \t // 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]); \t // 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]); 
 
\t \t });  
 
    }, 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>