jQueryでfunctionの実行を遅らせたい

Question

jquery.inviewライブラリを使用しています。

以下ソースで、5秒後にaddClassしたい場合はどうしたらいいでしょうか。

$(function() {
	$('.default').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
		if (isInView) {
			$(this).stop().addClass('open');
		}
		else {
			$(this).stop().removeClass('open');
		}
	});
});

調べたらsetTimeoutやdelay使うとよいとのことですが、色々使い方はあるのでしょうがどれがふさわかしいか分からず。。
勉強不足で申し訳ありません。ご教授願います。

Answer 1

どちらでも良い (間違い)

調べたらsetTimeoutやdelay使うとよいとのことですが、色々使い方はあるのでしょうがどれがふさわかしいか分からず。。

「結果は同じなので、どちらでも良い」と思いますが、jQuery をお使いなら、.delay() を使用する方が「らしい」といえるかもしれませんね。

(2017/06/07 16:06追記)
.delay() は .addClass() に適用できないとの指摘を受け、公式ドキュメントを読んだところ、確かにその通りである事を確認しました。詳細は後述。

.delay()

• .delay() | jQuery API Documentation

機械翻訳「バージョン1.4のjQueryに追加された.delay（）メソッドは、キュー内でそれに続く関数の実行を遅らせることができます。これは、標準エフェクトキューまたはカスタムキューで使用できます。キュー内の後続のイベントだけが遅延します。たとえば、エフェクトキューを使用しない.show（）または.hide（）の引数なしのフォームを遅延させることはありません。」

期間はミリ秒単位で指定します。値が大きいほどアニメーションが遅くなり、遅いアニメーションは速いアニメーションでないことを示します。 'fast'と 'slow'という文字列は、それぞれ200ミリ秒と600ミリ秒の持続時間を示すために供給することができます。

標準エフェクトキューを使用すると、たとえば、<div id = "foo">の.slideUp（）と.fadeIn（）の間に800ミリ秒の遅延を設定できます。」

ここで書かれている標準エフェクトキュー、カスタムエフェクトキューは下記リンク先にあるAPIを指します。

• Basics | jQuery API Documentation
• Custom | jQuery API Documentation

.addClass() はこれに含まれない為、.delay() を適用することは出来ません。
従って、setTimeout() の一択となります。

setTimeout(function (event) {
  jQuery(event.currentTarget).addClass('open');
}, 5000, event);

.queue() + .delay()

「.delay() でも、.queue() を組み合わせれば可能」というアドバイスを頂き、書いてみました。

• .queue().delay().queue() - JSFiddle

<p class="foo">foo</p>
<script>
'use strict';
jQuery('.foo').queue(new Function).delay(1000).queue(function () {
  jQuery(this).addClass('open');
}).dequeue();;
</script>

一応できましたが、delay() からキューを実行できないようで事前に何もしない queue(new Function) を宣言しており、やや冗長なコードとなりました。

Re: kirimi_ さん

Comments

[kirimi_]

.delay()を使って再度書いてみましたが、書き方はこちらであってますでしょうか･･･。

$(function() {
$('.companybox-visual').delay(5000).on('inview', function(event, isInView, visiblePartX, visiblePartY) {
if (isInView) {
$(this).stop().addClass('open').dequeue();
}
else {
$(this).stop().removeClass('open').dequeue();
}
});
});
もう少しだけ教えていただけますと幸いです。お手数お掛けします･･･。

[think49]

DOM構築後(DOMContentLoaded)、5秒間はinviewイベントが発火しないようにするのならそれで良いでしょう。
「5秒後にaddClass」なら.addClass() の手前で呼び出さなければならないと思いますが…。
.on() の意味を理解されていない様子なので、リファレンスを再読する事をお勧めします。

[kirimi_]

ご回答ありがとうございました。
.delay()はアニメーションなどの場合でないかぎり、.addClass()では動かないと調べたら書いてあったので、
この位置で書いてみました。
ありがとうございます。もう少しおさらいしてみます。

[think49]

なるほど、それは私の勉強不足でしたので、親記事に追記しました。

> .delay()はアニメーションなどの場合でないかぎり、.addClass()では動かないと調べたら書いてあったので、
調べた内容は質問本文に書くべきであったと思います。
情報を後出しされると、まだ隠している情報があるのではないか、と回答を躊躇させます。

ちなみに、.on() の手前に .delay() を書いても動きません。
仮に動いたとしても、タイミングが明らかに違います。実際にどのような動きになるのか、をよく想像して書くようにしてみて下さい。

[think49]

それと、.stop() が無意味な呼び出しになっています。
これはjQueryのエフェクト処理を停止させる関数ですが、エフェクト関数が全く使われていない為、機能しません。
https://api.jquery.com/stop/
公式ドキュメントは機械翻訳でもそれなりに読めるようなので、その関数がどんな機能を持っているのか、をよく読んでおくことをお勧めします。

[kirimi_]

ご丁寧にありがとうございます！
無事動きました。
とても勉強になりました。

[x_x]

一応、.delay() でも、.queue() を組み合わせれば可能ではあります。
https://api.jquery.com/queue/
(後半のほうの Example のような書き方です)

[think49]

x_x さんをアドバイスを受けて、.queue() + .delay() を使って親記事に書いてみました。
.queue(new Function) が冗長に感じてしまうのですが、もう少しスマートに書けないものでしょうか…。

[x_x]

え！ いらないですよ？
$('.foo').delay(5000).queue(function() {
$(this).addClass('open').dequeue();
});
もしくは、
$('.foo').delay(5000).queue(function(next) {
$(this).addClass('open');
next();
});

[think49]

To: x_x さん
前者の書き方を試していて、明らかに .delay() が効いてないタイミング(即座に)で .addClass() が呼び出されてしまいます…。
https://jsfiddle.net/jo8dc2r5/1/
後者の書き方で期待通りの動作になりました。ありがとうございます。
https://jsfiddle.net/jo8dc2r5/2/

[x_x]

よく見てください。dequeue()の位置が違います。

[think49]

To: x_x さん
おお、確かに。こちらも期待通りの動作になりました。感謝です。
https://jsfiddle.net/jo8dc2r5/3/
しかし、「どうしてこれで動くのか」に関してはさっぱり分かっていません。
.queue() に関しては自分の頭の中で「ここまでは間違いない」といえる知識が一つもない状態でして、難しいですね…。
リファレンスをもっと読み込む必要がありそうです。

Answer 2

このように、setTimeOutを用いてみました。
いかがでしょうか？

$(function() {
    $('.default').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
        if (isInView) {
            setTimeout(function() {
                $(this).stop().addClass('open');
            }, 5000);
        }
        else {
            $(this).stop().removeClass('open');
        }
    });
});

Comments

[kirimi_]

ありがとうございます。
どうも動かないみたいです･･･。
setTimeOutについてより調べてみます。

Answer 3

setTimeout でいいのではないですか？ ダメと言う理由があればそれを書いてください。