その買うを、もっとハッピーに。|ハピタス

jQueryで不確定な要素分間隔を空けて処理をする方法

昨日のと同様これでいけるじゃんと閃いた単純なことなんですが、今日はjQueryで不確定な要素分間隔を空けて処理をする方法です。
要素の数が決まってれば、例えば以下のようにそのまま列挙でも問題ありません。

$('li:first-of-type').delay(0).animate 〜
$('li:nth-of-type(2)').delay(500).animate 〜
$('li:last-of-type').delay(1000).animate 〜


要素の数が不確定の場合は上記では問題が出てきます。上記なら、3つ以下なら一応処理自体は行われるかもしれないけど、4つ以上の場合書いてないので処理のしようがありません。100個とか予め列挙しまくっておくのもスマートじゃありません(笑)
なのでeachで要素分ループすればスマートで良いのですが、JavaScriptはSleepがないので、何時ぞやに紹介したようにいちいちsetTimeoutでやらないといけないのかー面倒だなと思っていました。
ですが、ふと思いましたが単純にdelayの中の値を加算していくだけで実現出来るんですね。
SleepやsetTimeoutだと休む間隔を指定しますが、delayの場合その値をどんどん足していくと。
つまり以下のように記述すると不確定要素分間隔を空けて処理が出来ます。

var wait_time = 500;
var delay_time = 0;
$('li').each(function(i){
	$(this).delay(delay_time).animete 〜 ;
	delay_time += wait_time;
});


すごく単純ですが、前回同様自分の検索の仕方が悪いのか自分の理想なものが探せなかったので、書いてみました。