JQuery के साथ 5 सेकंड कैसे प्रतीक्षा करें?

Question

मैं एक प्रभाव बनाने की कोशिश कर रहा हूं जहां पृष्ठ लोड होता है, और 5 सेकंड के बाद, स्क्रीन पर सफलता संदेश बाहर हो जाता है, या स्लाइड करता है।

इसे कैसे प्राप्त किया जा सकता है?

Answer 1

जावास्क्रिप्ट सेटटाइमआउट में निर्मित ।

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

अद्यतन : आप तब से इंतजार करना चाहते हैं जब पृष्ठ लोड हो चुका हो, इसलिए उस कोड को अपनी $(document).ready(...);स्क्रिप्ट के अंदर रखें ।

अद्यतन 2 : jquery 1.4.0 ने .delayविधि पेश की । इसे देखें । ध्यान दें कि .delay केवल jQuery प्रभाव कतारों के साथ काम करता है।

Comments

क्या jQuery में कुछ भी है जो आप सेटटाइमआउट का उपयोग करने के बजाय उपयोग कर सकते हैं?

— एंड्रयू

jQuery को जावास्क्रिप्ट में लिखा गया है। यदि आप jQuery को शामिल और उपयोग करते हैं, तो आपको जावास्क्रिप्ट की आवश्यकता है। यदि आपके पास जावास्क्रिप्ट है, तो आपके पास है setTimeout।

— एलेक्स बैगनोलिनी 22

हाँ मुझे पता हे। मेरा मतलब है कि $ ('संदेश')) प्रतीक्षा करें (5000) .slideUp (); इतना अच्छा होगा। लेकिन मुझे नहीं लगता कि एक प्रतीक्षा () फ़ंक्शन मौजूद है।

— एंड्रयू

.delay (5000) चट्टानें

— demoncodemonkey

बस एक सिदोते - .दिल केवल jQuery प्रभाव कतारों के साथ काम करता है, इसलिए यह इस तरह स्लाइड और fades के लिए एकदम सही है। मुझे यह महसूस करने में थोड़ा समय लगा कि यह उन अन्य चीजों के लिए काम नहीं करता है, जिन्हें आप jQuery के साथ कर सकते हैं।

— जोएल बेकहम

Answer 2

एक सामान्य जावास्क्रिप्ट टाइमर का उपयोग करें:

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

EDIT: ओपी की टिप्पणी के जवाब में यह पूछने पर कि क्या इसे jQuery में करने का कोई तरीका है और setTimeoutजवाब का उपयोग नहीं करना है। लेकिन अगर आप इसे और अधिक "jQueryish" बनाना चाहते हैं, तो आप इसे इस तरह से लपेट सकते हैं:

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

फिर आप इसे इस तरह से कॉल कर सकते हैं:

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

Answer 3

मैं इस सवाल पर भागा और मुझे लगा कि मैं इस विषय पर अपडेट प्रदान करूंगा। 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 का उपयोग करता है:

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

Comments

इयान क्लार्क - यह सुपर अद्भुत समाधान है! मुझे यह बहुत पसंद है और मैं इसे अपने प्रोजेक्ट्स में इस्तेमाल करूंगा। धन्यवाद!

— एंटोन डैनिलचेंको

पता नहीं क्यों कोड का यह छोटा सा टुकड़ा काम नहीं करता है

— MR_AMDEV

Answer 4

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

आदि।

Comments

यह स्वीकृत उत्तर से कैसे भिन्न है ?

— तुनकी

स्वरूपण / वाक्य रचना और यह समय पर अधिक से अधिक स्पष्टीकरण देता है।

— मौडुलस

Answer 5

एक संदेश ओवरले के लिए इस एक का उपयोग किया गया है जिसे क्लिक करने पर तुरंत बंद किया जा सकता है या यह 10 सेकंड के बाद एक ऑटोक्लेज़ करता है।

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

Comments

+10, यह सही उत्तर होना चाहिए, .delay()और इसे नेस्टेड किया जा सकता है

— डब्ल्यूपीसीओडर

Answer 6

अंडरस्कोर पुस्तकालय भी एक "देरी" समारोह प्रदान करता है:

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

Answer 7

जॉय के जवाब के आधार पर, मैं एक इरादा (jQuery द्वारा, 'कतार' के बारे में पढ़ा) समाधान के साथ आया था।

यह कुछ हद तक jQuery.animate () सिंटैक्स का अनुसरण करता है - अन्य fx फ़ंक्शन के साथ जंजीर होने की अनुमति देता है, 'धीमी' और अन्य jQuery.fx.speeds के साथ-साथ पूरी तरह से jQuery का समर्थन करता है। और एनिमेशन के रूप में उसी तरह संभाला जाएगा, यदि आप उन को रोकते हैं।

jsFiddle टेस्ट ग्राउंड अधिक usages के साथ (जैसे दिखावा .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 () और $ (..) के समर्थन का उपयोग करें। प्रतीक्षा () करें।

// 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 व्यवहार।

Answer 8

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

Answer 9

एहसास है कि यह एक पुराना सवाल है, लेकिन मैंने इस मुद्दे को हल करने के लिए एक प्लगइन लिखा है जो किसी को उपयोगी लग सकता है।

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

आपको यह करने देता है:

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