jQuery - कई डॉलर (दस्तावेज़)। पहले से ही…?


358

सवाल:

यदि मैं दो जावास्क्रिप्ट फ़ाइलों में लिंक करता हूं, दोनों $(document).readyफ़ंक्शन के साथ , क्या होता है? क्या एक दूसरे को अधिलेखित करता है? या दोनों $(document).readyको बुलाया जाता है?

उदाहरण के लिए,

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript" src="http://.../jquery1.js"></script>

<script type="text/javascript" src="http://.../jquery2.js"></script>

jquery1.js:

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
});

jquery2.js:

$(document).ready(function(){
    $("#page-subtitle").html("Document-ready was called!");
});


मुझे यकीन है कि दोनों कॉल को एक ही में संयोजित करना सबसे अच्छा अभ्यास है $(document).readyलेकिन यह मेरी स्थिति में काफी संभव नहीं है।


जवाबों:


349

सभी निष्पादित हो जाएंगे और पहले कॉल पर पहले रन के आधार पर !!

<div id="target"></div>

<script>
  $(document).ready(function(){
    jQuery('#target').append('target edit 1<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 2<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 3<br>');
  });
</script>

डेमो जैसा कि आप देख सकते हैं कि वे एक दूसरे को प्रतिस्थापित नहीं करते हैं

साथ ही एक बात का उल्लेख करना चाहूंगा

इसके स्थान पर

$(document).ready(function(){});

आप इस शॉर्टकट का उपयोग कर सकते हैं

jQuery(function(){
   //dom ready codes
});

66
या इससे भी कम $ (फ़ंक्शन () {// डोम तैयार कोड}); api.jquery.com/ready
davehale23

217
$ देखकर याद रखें (फ़ंक्शन () {// do stuff}); पहली बार, और यह स्पष्टीकरण Google के लिए कितना मुश्किल था? $ (document) .ready संचार इतना कम के लिए इतना अधिक ...
मैट मोंटाग

56
एक वोट फॉर टेरर, कम पठनीय कोड आतंकवाद के लिए एक वोट है।
FreeAsInBeer

10
शॉर्टकट कोई लाभ नहीं प्रदान करते हैं, लेकिन आपत्ति का कारण बनते हैं। यदि आपका लक्ष्य आपके कोड को पढ़ने, समझने और बनाए रखने में लगने वाले समय के हिसाब से "छोटा" बनाना है, तो ये शॉर्टकट आपको लंबा रास्ता तय करेंगे।
जोंनोमो

3
यदि शॉर्टकट का उपयोग करना बुराई है, तो एक का उपयोग करना चाहिएjQuery(document).ready(function(){ });
मेमेट ऑलसेन

76

यह ध्यान रखना महत्वपूर्ण है कि प्रत्येक jQuery()कॉल को वास्तव में वापस आना चाहिए। यदि एक अपवाद को एक में फेंक दिया जाता है, तो बाद में (असंबंधित) कॉलों को कभी भी निष्पादित नहीं किया जाएगा।

यह सिंटैक्स की परवाह किए बिना लागू होता है। आप उपयोग कर सकते हैं jQuery(), jQuery(function() {}), $(document).ready(), जो कुछ भी आप की तरह, व्यवहार में ही है। यदि कोई शुरुआती विफल रहता है, तो बाद के ब्लॉक कभी नहीं चलाए जाएंगे।

तृतीय-पक्ष पुस्तकालयों का उपयोग करते समय मेरे लिए यह एक समस्या थी। एक पुस्तकालय एक अपवाद को फेंक रहा था, और बाद के पुस्तकालयों ने कभी भी कुछ भी आरंभ नहीं किया।


2
इस। मैं सिर्फ इस मुद्दे पर नीचे एक समस्या को कम करने के लिए एक अच्छा घंटा बिताया है। मेरी एक $(document).readyकॉल में एक त्रुटि थी और इसलिए एक अलग $(document).readyफ़ंक्शन को कभी कॉल नहीं किया गया। यह मुझे पागल कर रहा था।
स्क्रॉल

10
यह अब मामला ही नहीं है। JQuery 3.0 के रूप में, jQuery यह सुनिश्चित करता है कि एक हैंडलर में होने वाला एक अपवाद आने वाले हैंडलर को निष्पादित करने से नहीं रोकता है। api.jquery.com/ready
रवि तेजा

31

$ (Document) .ready (); किसी भी अन्य फ़ंक्शन के समान है। दस्तावेज़ तैयार होने के बाद यह आग लग जाती है - यानी लोड हो जाती है। सवाल यह है कि क्या होता है जब कई $ (दस्तावेज़) पहले से ही () के नहीं निकाल दिए जाते हैं जब आप एक ही फ़ंक्शन को कई $ (दस्तावेज़) के भीतर आग लगाते हैं। पहले से ही ()।

//this
<div id="target"></div>

$(document).ready(function(){
   jQuery('#target').append('target edit 1<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 2<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 3<br>');
});

//is the same as
<div id="target"></div>

$(document).ready(function(){

    jQuery('#target').append('target edit 1<br>');

    jQuery('#target').append('target edit 2<br>');

    jQuery('#target').append('target edit 3<br>');

});

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

निष्कर्ष में जहां कभी संभव हो केवल 1 $ (दस्तावेज़) का उपयोग करें। पहले से ही ();

// पुराना उत्तर

वे दोनों क्रम में बुलाए जाएंगे। सबसे अच्छा अभ्यास उन्हें गठबंधन करना होगा। लेकिन चिंता मत करो अगर यह संभव नहीं है। पृष्ठ में विस्फोट नहीं होगा।


^ ^ मुझे मेरा संपादित के रूप में मुझे लगा कि लोग एक ही फ़ंक्शन को कई बार चलाने और कई कार्यों को कई $ (दस्तावेज़ में अलग-अलग चलाने) के बीच भ्रमित हो सकते हैं। ^ ^ आशा है कि यह मदद करता है।
एड फ्रायड


9

दोनों को बुलाया जाएगा, पहले आओ पहले पाओ। यहाँ एक नज़र रखना ।

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
  });

$(document).ready(function(){
    $("#page-title").html("Document-ready 2 was called!");
  });

आउटपुट:

दस्तावेज-तैयार 2 को बुलाया गया था!


2

एक सूत्र को परिशोधित करने के लिए नहीं, लेकिन jQueryसुझाए गए सिंटैक्स के नवीनतम संस्करण के तहत है:

$( handler )

एक अनाम फ़ंक्शन का उपयोग करते हुए, यह ऐसा दिखेगा

$(function() { ... insert code here ... });

इस लिंक को देखें:

https://api.jquery.com/ready/

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.