इंतजार () या नींद () समारोह में काम?


101

मैं एक वर्ग जोड़ना चाहता हूं, 2 सेकंड प्रतीक्षा करें और दूसरी कक्षा जोड़ें।

.addClass("load").wait(2sec).addClass("done");

क्या कोई रास्ता है?

जवाबों:


186

कुछ समय की देरी (मिलीसेकंड में मापा गया) के बाद सेटटाइमआउट कुछ कोड निष्पादित करेगा। हालांकि, एक महत्वपूर्ण नोट: जावास्क्रिप्ट की प्रकृति के कारण, टाइमर के सेटअप के बाद बाकी कोड चलता रहता है:

$('#someid').addClass("load");

setTimeout(function(){
  $('#someid').addClass("done");
}, 2000);

// Any code here will execute immediately after the 'load' class is added to the element.

2
यह वर्तमान समय में एक खराब समाधान है क्योंकि यह एनीमेशन पर jquery नियंत्रण होने का लाभ खो देता है, जैसे .stop ()। बहुत बेहतर समाधान है .delay ()
user151496

7
@ user123blahblah ... यह प्रश्न के लिए PROPER समाधान है (जिसका एनीमेशन से कोई लेना देना नहीं है)। .delay एनीमेशन कतार के बाहर जैक बीन्स करता है। जिस पर आपकी गलत टिप्पणी को गलत समझा गया, खुद को गुमराह कर रहे थे।
इनक्रेडिबल

34

वह होगा .delay()

http://api.jquery.com/delay/

यदि आप AJAX का सामान कर रहे हैं, तो आपको वास्तव में सिर्फ ऑटो लिखना नहीं चाहिए "किया" आपको वास्तव में प्रतिक्रिया की प्रतीक्षा करनी चाहिए और देखना चाहिए कि क्या यह वास्तव में किया गया है।


1
इसके अलावा स्टीवन आप .removeClass('load')अन्यथा अपने दोनों वर्गों को जोड़ना और लोड करना चाहते हैं , जो संभवतः अवांछित है। यदि आप वास्तव में एक अतुल्यकालिक कार्रवाई के पूरा होने की प्रतीक्षा कर रहे हैं, तो आपकी सबसे अच्छी शर्त यह है कि .addassass इसे पूरा करे और सफल हो, यदि नहीं .addClass ('त्रुटि') हो सकता है कि एक विचार
गैरी ग्रीन

52
किसी भी तरह से jquery "देरी ()" फ़ंक्शन सामान्य प्रयोजन "प्रतीक्षा" सुविधा की तरह कुछ भी प्रदान करता है। यह एनीमेशन सिस्टम का एक हिस्सा है, और केवल एनीमेशन कतार में लागू होता है। फ़ंक्शन हमेशा तुरंत लौटता है, और निष्पादन रोक के बिना जारी रहता है।
पोइंट्टी

22

देरी () काम नहीं करेगा। देरी के साथ समस्या () यह एनीमेशन सिस्टम का हिस्सा है, और केवल एनीमेशन कतारों पर लागू होती है।

क्या होगा अगर आप एनीमेशन के बाहर कुछ करने से पहले इंतजार करना चाहते हैं ??

इसे इस्तेमाल करो:

window.setTimeout(function(){
                 // do whatever you want to do     
                  }, 600);

क्या होता है ?: इस परिदृश्य में यह कर्ली ब्रेसिज़ के भीतर निर्दिष्ट कोड को निष्पादित करने से पहले 600 मील की दूरी पर प्रतीक्षा करता है।

एक बार मैंने यह पता लगाने में मदद की और मुझे आशा है कि यह आपकी मदद करेगा!

महत्वपूर्ण सूचना: 'window.setTimeout' एसिंक्रोनस रूप से होता है। अपना कोड लिखते समय इसे ध्यान में रखें!


20

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

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

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

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

2
बहुत बहुत धन्यवाद!
फिल्प २४४ phil

2

एक फ़ंक्शन है, लेकिन यह अतिरिक्त है: http://docs.jquery.com/Cookbook/wait

यह छोटा स्निपेट आपको प्रतीक्षा करने की अनुमति देता है:

$.fn.wait = function(time, type) {
    time = time || 1000;
    type = type || "fx";
    return this.queue(type, function() {
        var self = this;
        setTimeout(function() {
            $(self).dequeue();
        }, time);
    });
};


0

xml4jQuery प्लगइन नींद (एमएस, कॉलबैक) विधि देता है। शेष अवधि को नींद की अवधि के बाद निष्पादित किया जाएगा।

$(".toFill").html("Click here")
                .$on('click')
                .html('Loading...')
                .sleep(1000)
                .html( 'done')
                .toggleClass('clickable')
                .prepend('Still clickable <hr/>');
.toFill{border: dashed 2px palegreen; border-radius: 1em; display: inline-block;padding: 1em;}
        .clickable{ cursor: pointer; border-color: blue;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script type="text/javascript" src="https://cdn.xml4jquery.com/ajax/libs/xml4jquery/1.1.2/xml4jquery.js"></script>
        <div class="toFill clickable"></div>


-1

सेटटाइमआउट फ़ंक्शन का उपयोग करना, उदाहरण के लिए उदाहरण के लिए यहां जाएं


21
यह आपके उत्तर के अधिकांश के लिए एक लिंक पर भरोसा नहीं करने के लिए सबसे अच्छा माना जाता है
जेम्स जेनकिंस

6
@JamesJenkins टिप्पणी का समर्थन करने के लिए, यह इसलिए है क्योंकि लिंक हमेशा विश्वसनीय नहीं होते हैं। यदि किसी व्यक्ति को लिंक जोड़ना है, तो अपने उत्तर में कोड को भी शामिल करना सबसे अच्छा है।
Tass
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.