jqueryのwait()またはsleep()関数?


101

クラスを追加し、2秒待ってから別のクラスを追加したい。

.addClass("load").wait(2sec).addClass("done");

何か方法はありますか?

回答:


186

setTimeoutは、一定の時間(ミリ秒単位で測定)の遅延の後、コードを実行します。ただし、重要な注意:JavaScriptの性質上、残りのコードはタイマーが設定された後も引き続き実行されます。

$('#someid').addClass("load");

setTimeout(function(){
  $('#someid').addClass("done");
}, 2000);

// Any code here will execute immediately after the 'load' class is added to the element.

2
.stop()のように、アニメーションをjqueryで制御する利点を失うため、現時点ではこれは適切な解決策ではありません。より良い解決策は.delay()です
user151496

7
user123blahblah @ ...これは、PROPER(アニメーションとは何の関係もありません)質問のためのソリューション。.delayは、アニメーションキューの外で豆をジャックします。あなたの誤ったコメントに賛成した人は誰でも、自分自身を誤解させました。
IncredibleHat

34

それはなるだろう.delay()

http://api.jquery.com/delay/

あなたがAJAXのものをやっているなら、あなたは本当に「完了」を自動で書くべきではありません、あなたは本当に応答を待って、それが実際に行われたかどうか見るべきです。


1
またスティーブンは、.removeClass('load')そうでなければクラスの追加とロードの両方を追加したいと考えていますが、これはおそらく望ましくありません。あなたは確かに完全に非同期のアクションを待っている場合は、あなたの最善の策は、.addClassを行うことです、それが完了し、成功している、そうでない場合は.addClass(「エラー」)多分アイデア
ゲイリー・グリーン

52
jQUeryの「delay()」関数は、汎用の「待機」機能のようなものをまったく提供しません。これはアニメーションシステムの一部であり、アニメーションキューにのみ適用されます。関数は常にすぐに戻り、実行は一時停止することなく続行されます。
先のとがった

22

delay()は仕事をしません。delay()の問題は、アニメーションシステムの一部であり、アニメーションキューにのみ適用されます。

アニメーション以外の何かを実行する前に待機したい場合はどうなりますか?

これを使って:

window.setTimeout(function(){
                 // do whatever you want to do     
                  }, 600);

何が起こりますか?:このシナリオでは、中括弧内で指定されたコードを実行する前に600ミリ秒待機します。

これは私がそれを理解し、それがあなたにも役立つことを願っていれば、私に大きな助けとなりました!

重要なお知らせ:「window.setTimeout」は非同期で発生します。コードを書くときは、そのことを覚えておいてください。


20

これは古い質問であることを理解してください。しかし、私はこの問題に対処するためのプラグインを作成しました。

https://github.com/madbook/jquery.wait

これを行うことができます:

$('#myElement').addClass('load').wait(2000).addClass('done');

2
本当にありがとうございます!
phil294 2015年

2

関数はありますが、それは余分です:http : //docs.jquery.com/Cookbook/wait

この小さなスニペットを使用すると、待機することができます。

$.fn.wait = function(time, type) {
    time = time || 1000;
    type = type || "fx";
    return this.queue(type, function() {
        var self = this;
        setTimeout(function() {
            $(self).dequeue();
        }, time);
    });
};

2

.delay()関数を使用できます。
これはあなたが求めているものです:

.addClass("load").delay(2000).addClass("done");

0

xml4jQueryプラグインは、sleep(ms、callback)メソッドを提供します。残りのチェーンは、スリープ期間の後に実行されます。

$(".toFill").html("Click here")
                .$on('click')
                .html('Loading...')
                .sleep(1000)
                .html( 'done')
                .toggleClass('clickable')
                .prepend('Still clickable <hr/>');
.toFill{border: dashed 2px palegreen; border-radius: 1em; display: inline-block;padding: 1em;}
        .clickable{ cursor: pointer; border-color: blue;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script type="text/javascript" src="https://cdn.xml4jquery.com/ajax/libs/xml4jquery/1.1.2/xml4jquery.js"></script>
        <div class="toFill clickable"></div>


-1

たとえば、setTimeout関数を使用します。


21
答えの大部分をリンクに頼らないことが最善と考えられています
James Jenkins

6
@JamesJenkinsコメントをバックアップするには、リンクが常に信頼できるとは限らないためです。人がリンクを追加する場合は、回答にコード自体を含めることをお勧めします。
Tass
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.