web-dev-qa-db-ja.com

JQueryで5秒待つ方法は?

私は、ページがロードされる場所にエフェクトを作成しようとしています、そして5秒後、スクリーン上の成功メッセージは消えていくか、または上にスライドします。

どうすればこれを達成できますか?

360
Andrew

Javascriptに組み込まれている setTimeout

setTimeout(
  function() 
  {
    //do something special
  }, 5000);

_ update _ :ページの読み込みが完了してから待つ必要があるので、そのコードを$(document).ready(...);スクリプト内に入れます。

UPDATE 2 :jquery 1.4.0では.delayメソッドが導入されました。 見てみな 。 .delayはjQuery効果キューでのみ機能することに注意してください。

664
Alex Bagnolini

通常のJavaScriptタイマーを使用します。

$(function(){
   function show_popup(){
      $("#message").slideUp();
   };
   window.setTimeout( show_popup, 5000 ); // 5 seconds
});

これはDOMの準備が整った後5秒間待ちます。ページが実際にloadedになるまで待ちたい場合は、これを使用する必要があります。

$(window).load(function(){
   function show_popup(){
      $("#message").slideUp();
   };
   window.setTimeout( show_popup, 5000 ); // 5 seconds
})

編集: jQueryでそれを実行する方法があり、setTimeoutを使用しないかどうかを尋ねるOPのコメントに対する答えは「いいえ」です。しかし、もっと "jQueryish"にしたい場合は、次のようにラップすることができます。

$.wait = function( callback, seconds){
   return window.setTimeout( callback, seconds * 1000 );
}

あなたはそれからこのようにそれを呼ぶことができます:

$.wait( function(){ $("#message").slideUp() }, 5);
55
Doug Neiner

この質問に出くわし、このトピックに関する最新情報を提供すると思いました。 jQuery(v1.5 +)には Deferred モデルが含まれ、これは(jQuery 3までは Promises/A 仕様に準拠していません) は一般に、多くの非同期問題に対処するより明確な方法であると見なされています。このアプローチを使用して$.wait()メソッドを実装すると、特に読みやすくなります。

$.wait = function(ms) {
    var defer = $.Deferred();
    setTimeout(function() { defer.resolve(); }, ms);
    return defer;
};

そして、これを使用する方法は次のとおりです。

$.wait(5000).then(disco);

ただし、一時停止後に単一のjQuery選択に対してのみアクションを実行する場合は、shouldjQueryのネイティブ .delay() を使用する必要があります=内部でDeferredを使用していると思う:

$(".my-element").delay(5000).fadeIn();
40
Ian Clark
setTimeout(function(){


},5000); 

コードを{ }の内側に配置します。

300 = 0.3 seconds

700 = 0.7 seconds

1000 = 1 second

2000= 2 seconds

2200 = 2.2 seconds

3500 = 3.5 seconds

10000 = 10 seconds

など

21
maudulus

クリックですぐに閉じることができるか、または10秒後にオートクローズをすることができるメッセージオーバーレイのためにこれを使用していました。

button = $('.status-button a', whatever);
if(button.hasClass('close')) {
  button.delay(10000).queue(function() {
    $(this).click().dequeue();
  });
}
17
Jo Hasenau

アンダースコアライブラリ は「遅延」機能も提供します。

_.delay(function(msg) { console.log(msg); }, 5000, 'Hello');
9
izilotti

Joeyの答えに基づいて、私は意図した(jQueryで、 'queue'について読む)解決策を思いついた。

JQuery.animate()構文に多少従っています - 他のfx関数と連鎖させることを可能にし、 'slow'と他のjQuery.fx.speedsをサポートしています。あなたがそれらを停止した場合、そしてアニメーションと同じ方法で処理されます。

(.stop()を見せびらかすような)もっと用途のあるjsFiddleテストグラウンドは ここ にあります。

解の核心は以下のとおりです。

$('<queue/>')
.delay(100 /*ms*/)
.queue( (next) => { $('#result').text('done.'); next(); } );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

$ .wait()および$(..)の使用をサポートするプラグインとしての全体。wait():

// add wait as $.wait() standalone and $(elem).wait() for animation chaining
(function($) {

  $.wait = function(duration, completeCallback, target) {
    $target = $(target || '<queue />');
    return $target.delay(duration).queue(function(next){completeCallback && completeCallback.call($target); next();});
  }

  $.fn.wait = function(duration, completeCallback) {
    return $.wait.call(this, duration, completeCallback, this);
  };

})(jQuery);

//TEST
$(function() {

  // stand alone
  $.wait(1000, function() {
    $('#result')
    .append('...done');
  });

  // chained
  $('#result')
  .append('go...')
  .wait('slow', function() {
    $(this).append('after slow');
  })
  .css({color: 'green'});
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

注: waitはアニメーションスタックに追加されるため、$。css()が即座に実行されます。

4
BananaAcid
$( "#foo" ).slideUp( 300 ).delay( 5000 ).fadeIn( 400 );
1
mak