範囲外のjQueryタイムアウトをクリアする

Question

2400msごとに「チック」をトリガーするクロックがあります。 「チック」では親のdivの子をtoggleClassにしたいが、同時にすべてではない：親のインデックスを使用してトリガーを時間的にオフセットして、ある種の波で起こるようにする。 それに加えて、私はそれをやり始めたはずですが、私はユーザーがスクロールしている間にこれが起こらないようにしています。 私はコンテナに.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>