jQuery로 5초 기다리는 방법?

jQuery로 5초 기다리는 방법?

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

어떻게 하면 이를 달성할 수 있을까요?

Javascript 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
})

편집: jQuery에서 하고 사용하지 않는 방법이 있는지 묻는 OP의 의견에 답합니다.setTimeout대답은 아니오입니다.하지만 더 "jQueryish"로 만들고 싶다면 다음과 같이 포장할 수 있습니다.

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

그러면 다음과 같이 부를 수 있습니다.

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

저는 이 질문을 우연히 발견했고 이 주제에 대한 업데이트를 제공해야겠다고 생각했습니다.jQuery(v1.5+)에는 모델이 포함되어 있으며, (jQuery 3까지 Promise/A 사양을 준수하지 않음에도 불구하고) 일반적으로 많은 비동기 문제에 접근하는 더 명확한 방법으로 간주됩니다.구현$.wait()이 접근법을 사용하는 방법은 특히 읽을 수 있습니다.

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

사용 방법은 다음과 같습니다.

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

그러나 일시 중지 후 단일 jQuery 선택에 대한 작업만 수행하려는 경우 후드 아래에서도 지연된 jQuery 네이티브를 사용해야 합니다.

$(".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가 '큐'에 대해 읽은) 해결책을 생각해 냈습니다.

jQuery.animate() 구문을 다소 따르며, 다른 fx 함수와 연결할 수 있으며, '느림' 및 다른 jQuery.fx.speed를 지원하며 완전한 jQuery입니다.그리고 그것들을 멈추면 애니메이션과 같은 방식으로 처리될 것입니다.

js.stop()을 과시하는 것과 같이 더 많은 용도가 있는 Fiddle 테스트 그라운드는 여기에서 확인할 수 있습니다.

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

$('<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>

참고: 대기가 애니메이션 스택에 추가되기 때문에 $.css()는 예상대로 즉시 실행됩니다. jQuery 동작입니다.

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

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

다음 작업을 수행할 수 있습니다.

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

를 사용해야 이..wait에 .delay가 지원되는 것은 입니다..delay 그 그에밖.delay애니메이션 기능만 사용할 수 있습니다.를 들어 는 " " " 를 하지 않습니다..addClass그리고..removeClass

또는 이 기능을 대신 사용할 수 있습니다.

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

sleep(5000);

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

aynsc/await를 사용하여 빠르고 쉽게 지연하려면 다음 작업을 수행할 수 있습니다.

await $(window).delay(5000).promise();

언급URL : https://stackoverflow.com/questions/1836105/how-to-wait-5-seconds-with-jquery