จะรอ 5 วินาทีกับ jQuery ได้อย่างไร

ฉันพยายามสร้างเอฟเฟกต์ที่หน้าโหลดและหลังจาก 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
});

ขั้นตอนนี้จะรอ 5 วินาทีหลังจาก DOM พร้อม หากคุณต้องการรอจนกว่าหน้านั้นจะเป็นจริง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) จะถือว่าเป็นวิธีที่ชัดเจนกว่าในการจัดการกับปัญหาแบบอะซิงโครนัสจำนวนมาก การใช้$.wait()วิธีการโดยใช้วิธีนี้สามารถอ่านได้โดยเฉพาะฉันเชื่อว่า:

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

และนี่คือวิธีการใช้งาน:

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

อย่างไรก็ตามหากหลังจากหยุดชั่วคราวคุณต้องการที่จะดำเนินการกับการเลือก jQuery เดียวจากนั้นคุณควรใช้ภาษาพื้นเมืองของ jQuery .delay()ซึ่งฉันเชื่อว่าจะใช้ Deferred's ภายใต้ประทุน:

$(".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');

จากคำตอบของโจอี้ฉันคิดวิธีแก้ปัญหา (โดย jQuery อ่านเกี่ยวกับ 'คิว')

มันค่อนข้างดังต่อไปนี้ไวยากรณ์ 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>

หมายเหตุ:เนื่องจากการรอเพิ่มลงในภาพเคลื่อนไหวสแต็ก $ .css () จะถูกดำเนินการทันที - ตามที่ควรจะเป็น: พฤติกรรมของ jQuery ที่คาดไว้

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

ตระหนักว่านี่เป็นคำถามเก่า แต่ฉันเขียนปลั๊กอินเพื่อแก้ไขปัญหานี้ซึ่งบางคนอาจพบว่ามีประโยชน์

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

ให้คุณทำสิ่งนี้:

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