回答:
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.
それはなるだろう.delay()
。
あなたがAJAXのものをやっているなら、あなたは本当に「完了」を自動で書くべきではありません、あなたは本当に応答を待って、それが実際に行われたかどうか見るべきです。
.removeClass('load')
そうでなければクラスの追加とロードの両方を追加したいと考えていますが、これはおそらく望ましくありません。あなたは確かに完全に非同期のアクションを待っている場合は、あなたの最善の策は、.addClassを行うことです、それが完了し、成功している、そうでない場合は.addClass(「エラー」)多分アイデア
delay()は仕事をしません。delay()の問題は、アニメーションシステムの一部であり、アニメーションキューにのみ適用されます。
アニメーション以外の何かを実行する前に待機したい場合はどうなりますか?
これを使って:
window.setTimeout(function(){
// do whatever you want to do
}, 600);
何が起こりますか?:このシナリオでは、中括弧内で指定されたコードを実行する前に600ミリ秒待機します。
これは私がそれを理解し、それがあなたにも役立つことを願っていれば、私に大きな助けとなりました!
重要なお知らせ:「window.setTimeout」は非同期で発生します。コードを書くときは、そのことを覚えておいてください。
これは古い質問であることを理解してください。しかし、私はこの問題に対処するためのプラグインを作成しました。
https://github.com/madbook/jquery.wait
これを行うことができます:
$('#myElement').addClass('load').wait(2000).addClass('done');
関数はありますが、それは余分です: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);
});
};
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>
たとえば、setTimeout関数を使用します。