jQuery के डॉक्यूमेंट। पहले से ही बनाम कॉलिंग अनाम फ़ंक्शन


137

इन दोनों के बीच क्या अंतर है।

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

  2. (function(){ ... })();

क्या ये दोनों कार्य एक ही समय में कहे जाते हैं? मुझे पता है, जब संपूर्ण HTML पेज ब्राउज़र द्वारा प्रदान किया जाता है, लेकिन डॉक्यूमेंट पहले से ही चालू हो जाएगा, लेकिन 2nd फंक्शन (सेल्फ कॉलिंग गुमनाम फंक्शन) का क्या। क्या यह पृष्ठ को पूरा करने के लिए ब्राउज़र की प्रतीक्षा करता है या जब भी इसका सामना किया जाता है तो इसे कहा जाता है?


18
जो इसके लायक है, $(function() {});उसके बराबर है$(document).ready(function() {});
इयान हेनरी

1
जब भी सामना होगा स्वयं कॉलिंग अनाम फ़ंक्शन निष्पादित किया जाएगा। इसके अलावा, वास्तव में स्क्रीन पर दस्तावेज़ को प्रस्तुत करना और मेमोरी में ऑब्जेक्ट मॉडल बनाना असंबंधित है।
२०:०२ में अनुराग


4
आपको अपने प्रश्नों के उत्तर वास्तव में स्वीकार करने चाहिए जब वे प्रभावी रूप से इसका उत्तर दें। आपके पास बहुत कम स्वीकृति दर है।
लीगरो

पहला काम करने का गैर-jQuery तरीका है: document.addEventListener ('domContentLoaded', function () {...});
इवान थॉम्पसन

जवाबों:


112
  • $(document).ready(function(){ ... }); या छोटा $(function(){...});

    यह फ़ंक्शन तब कहा जाता है जब DOM is readyइसका मतलब है, आप उदाहरण के लिए तत्वों को क्वेरी करना शुरू कर सकते हैं । .ready()यह सुनिश्चित करने के लिए विभिन्न ब्राउज़रों पर विभिन्न तरीकों का उपयोग करेगा कि DOM वास्तव में तैयार है।

  • (function(){ ... })();

    यह एक फ़ंक्शन के अलावा और कुछ नहीं है जो ब्राउज़र को आपके द्वारा व्याख्या करने पर जितनी जल्दी हो सके खुद को आमंत्रित करता हैecma-/javascript । इसके बावजूद, इसकी बहुत संभावना नहीं है कि आप यहां सफलतापूर्वक कार्य कर सकते DOM elementsहैं।


1
@NimChimpsky मैं भ्रमित (फ़ंक्शन () {}); $ (फ़ंक्शन () {}) के साथ। आप गलत के विपरीत हैं;)
ALH

मैं उलझन में हूँ, (function(){ ... })();किसी भी जेएस कोड को जल्द से जल्द चलाने के संबंध में नहीं है? यदि आपने कहा था, alert()SIAF के भीतर या उसके बाहर, तो प्रभाव समान नहीं होगा?
skube

2
@skube हाँ, कोई भी JS कोड जैसे ही पार्सर पढ़ेगा, वैसे ही चलेगा, लेकिन आपका भ्रम हो सकता है कि SIAF के सामने "$" है या नहीं। यदि ऐसा है, और यह साइट jQuery का उपयोग कर रही है, तो यह jQuery document.ready सहायक फ़ंक्शन का छोटा रूप है, जो DOM के उपलब्ध होने के बाद दिए गए फ़ंक्शन को निष्पादित करने के लिए शेड्यूल करेगा। हेल्पर फंक्शन जैसे ही पढ़ा जाएगा, वैसे ही चलेगा, लेकिन आप जिस फंक्शन से इसे सप्लाई करेंगे वह नहीं होगा।
नील मुनरो

46

(function(){...})(); इसे जावास्क्रिप्ट में सामना करते ही निष्पादित किया जाएगा।

$(document).ready()दस्तावेज़ लोड होने के बाद निष्पादित किया जाएगा। $(function(){...});के लिए एक शॉर्टकट है $(document).ready()और सटीक एक ही काम करता है।


25
  1. $(document).ready(function() { ... });बस उस फ़ंक्शन को readyदस्तावेज़ की घटना में बांधता है , इसलिए, जैसा कि आपने कहा था, जब दस्तावेज़ लोड होता है, तो घटना ट्रिगर होती है।

  2. (function($) { ... })(jQuery);वास्तव में जावास्क्रिप्ट का एक निर्माण है, और कोड का वह सब कुछ jQueryऑब्जेक्ट function($)को एक पैरामीटर के रूप में पास करता है और फ़ंक्शन चलाता है, इसलिए उस फ़ंक्शन के अंदर, $हमेशा jQueryऑब्जेक्ट को संदर्भित करता है । इससे नाम बदलने की उलझनों आदि को सुलझाने में मदद मिल सकती है।

इसलिए # 1 को निष्पादित किया जाता है जब दस्तावेज़ को लोड किया जाता है, जबकि # 2 को तुरंत चलाया जाता है, शॉर्टहैंड jQueryनामक ऑब्जेक्ट के साथ $


25

जावास्क्रिप्ट कोड निष्पादित करने के लिए DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) तैयार होने पर निम्नलिखित कोड निष्पादित किया जाएगा।

$(document).ready(function(){
  // Write code here
}); 

उपरोक्त कोड के लिए छोटा हाथ है:

$(function(){
  // write code here
});

नीचे दिखाया गया कोड एक स्व-चालान करने वाला अनाम जावास्क्रिप्ट फ़ंक्शन है, और जैसे ही ब्राउज़र इसे व्याख्या करेगा, इसे निष्पादित किया जाएगा:

(function(){
  //write code here
})();   // It is the parenthesis here that call the function.

नीचे दिखाए गए jQuery के स्व-चालान समारोह, एक तर्क के रूप में वैश्विक jQuery ऑब्जेक्ट को पास करता है function($)। यह $एक परिभाषा के लिए वैश्विक गुंजाइश को पार करने की आवश्यकता के बिना स्व-आहरण फ़ंक्शन के भीतर स्थानीय रूप से उपयोग करने में सक्षम बनाता है। jQuery एकमात्र पुस्तकालय नहीं है जो इसका उपयोग करता है $, इसलिए यह संभावित नामकरण संघर्ष को कम करता है।

(function($){
  //some code
})(jQuery);

2
जावास्क्रिप्ट क्लोजर की बहुत ही सरल, स्पष्ट और संक्षिप्त व्याख्या।
CODE

16

DOM. "निर्माण" होने के बाद डॉक्यूमेंट पहले से चलाए जा रहे हैं। सेल्फ-इनवोकिंग फ़ंक्शंस तुरन्त चलता है - यदि <head>डोम निर्माण से पहले, इसमें डाला जाता है।


6
एक अनावश्यक डाउनवोट का मुकाबला करने के लिए +1। हालाँकि, आपके उत्तर में थोड़ी समस्या है। पार्सिंग के दौरान जहां भी यह पाया जाता है वहां सेल्फ-इनवोकिंग फंक्शन निष्पादित होगा, और जरूरी नहीं कि इसके अंदर हो <head>, और प्रारंभिक डोम के निर्माण के बाद नियम अलग नहीं हैं।
अनुराग
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.