jQuery로 5 초 동안 기다리는 방법?

페이지가로드되는 효과를 만들려고하는데 5 초 후에 화면의 성공 메시지가 사라지거나 위로 올라갑니다.

어떻게하면 되나요?

자바 스크립트 setTimeout 내장 .

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

업데이트 : 페이지 로딩이 완료된 이후로 기다리려면 $(document).ready(...);스크립트 에 해당 코드를 넣으십시오 .

업데이트 2 : jquery 1.4.0에 .delay메소드가 도입되었습니다 . 확인하십시오 . .delay는 jQuery 효과 대기열에서만 작동합니다.

일반적인 자바 스크립트 타이머를 사용하십시오.

$(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
})

편집 : OP의 의견에 대한 답변으로 jQuery에 수행 할 수있는 방법이 있는지 묻고 setTimeout대답을 사용하지 않는 것은 아니오입니다. 그러나 더 "jQueryish"로 만들고 싶다면 다음과 같이 감싸십시오.

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

그런 다음 다음과 같이 호출 할 수 있습니다.

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

나는이 질문을 가로 질러이 주제에 대한 업데이트를 제공 할 것이라고 생각했습니다. 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 선택에 대해서만 작업을 수행하려는 경우 jQuery의 네이티브 를 사용해야 합니다. .delay()이는 기본적 으로 Deferred를 사용한다고 생각합니다.

$(".my-element").delay(5000).fadeIn();

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

기타

클릭시 즉시 닫을 수 있거나 10 초 후에 자동 닫기를 수행하는 메시지 오버레이에이 기능을 사용했습니다.

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

밑줄 라이브러리는 또한 "지연"기능을 제공합니다 :

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

Joey의 답변을 바탕으로 (jQuery에 의해 'queue'에 대한 읽기) 솔루션을 찾았습니다.

jQuery.animate () 구문을 다소 따릅니다. 다른 fx 함수와 연결될 수 있으며 '느린'및 다른 jQuery.fx.speeds를 지원할뿐만 아니라 완전히 jQuery입니다. 애니메이션을 중지하면 애니메이션과 같은 방식으로 처리됩니다.

더 많은 사용법을 가진 jsFiddle 테스트 그라운드 (예 : .stop () 표시)는 여기 에서 찾을 수 있습니다 .

솔루션의 핵심은 다음과 같습니다.

$('<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 ()가 예상대로 실행됩니다. 예상되는 jQuery 동작입니다.

$( "#foo" ).slideUp( 300 ).delay( 5000 ).fadeIn( 400 );

이것은 오래된 질문이라는 것을 알고 있지만 누군가가 유용하다고 생각할 수있는이 문제를 해결하기 위해 플러그인을 작성했습니다.

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

당신이 할 수 있습니다 :

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