जब आप ईवेंट हैंडलर के लिए $ (दस्तावेज़) .ready (function() का उपयोग नहीं करना चाहिए?

Question

मैं jquery और जावास्क्रिप्ट के लिए नया हूं और बस जानना चाहता था, आप अपने सभी ईवेंट के लिए .ready() फ़ंक्शन का उपयोग क्यों नहीं करना चाहेंगे संचालकों?

वहाँ संभावित समस्याओं होना नहीं किया जा सका से पहले पूरे पृष्ठ प्रदान की गई पर कोई उपयोगकर्ता एक माउस घटना या एक कुंजीपटल घटना के लिए इनपुट भेजता है?

Answer 1

यह कभी भी मामला नहीं होना चाहिए, डीओएम लोड होने पर jQuery दस्तावेज़ तैयार आग लगाना चाहिए। यह लोड करने के लिए पूर्ण पृष्ठ (छवियों और पसंद सहित) की प्रतीक्षा नहीं करता है। यह बेहद दुर्लभ होगा कि उपयोगकर्ता आपके कोड को निष्पादित करने से पहले कुछ कोशिश करने और ट्रिगर करने के लिए समय पर प्रतिक्रिया करने में सक्षम होगा। इस पढ़ें: http://api.jquery.com/ready/

विशेष रूप से, पहले पैराग्राफ:

जावा स्क्रिप्ट कोड को क्रियान्वित करने के लिए जब एक पेज प्रदान की गई है के लिए लोड घटना प्रदान करता है, इस घटना के सभी परिसंपत्तियों छवियों जैसे जब तक शुरू हो न हो पूरी तरह से प्राप्त किया गया है। ज्यादातर मामलों में, स्क्रिप्ट को चलाया जा सकता है जैसे ही डीओएम पदानुक्रम पूरी तरह से बनाया गया है। हैंडलर को पास किया गया है। डीओएम तैयार होने के बाद पहले से ही निष्पादित होने की गारंटी है, इसलिए यह आमतौर पर अन्य सभी ईवेंट हैंडलर को संलग्न करने और अन्य jQuery कोड चलाने के लिए सबसे अच्छी जगह है।

तो $ (दस्तावेज़) .ready (function() {}) या समकक्ष $ (फ़ंक्शन() {}) का उपयोग करना हमेशा एक अच्छा अभ्यास है।

संपादित करें: यह सुनिश्चित करने के लिए कि उपयोगकर्ता को कभी भी परेशानी नहीं होगी, सुनिश्चित करें कि आपकी स्क्रिप्ट सभी आपकी साइट के साथ होस्ट की गई हैं। उदाहरण के लिए, jQuery में सीडीएन का उपयोग करने का विकल्प है। सीडीएन अच्छा हैं, लेकिन यदि किसी भी कारण से उपयोगकर्ता आपकी साइट पर जा सकता है लेकिन सीडीएन नहीं, तो यह आपके पृष्ठ को बेकार स्थिति में छोड़ सकता है।

Answer 2

मेरा मानना ​​है कि आप वास्तव में $(document).ready() हैंडलर का उपयोग करना चाहिए। कारण होने के नाते, यदि आपका एचटीएमएल या डोम अभी तक पूरी तरह से लोड नहीं हुआ है, जब आप विभिन्न तत्वों के लिए ईवेंट बाध्य करते हैं, तो वे अभी तक पेज पर नहीं होने के कारण असफल हो सकते हैं।

मुझे यकीन नहीं है कि आपने कौन या क्या कहा है कि आप तैयार फ़ंक्शन में ईवेंट हैंडलर न डालें, लेकिन मैं कहूंगा कि यह एक बहुत ही सामान्य प्रथा है।

Answer 3

यही कारण है कि पूरे कोड .ready() फ़ंक्शन के अंदर पूरे कोड को लपेटना है।

$(document).ready(function(){ 
    //all event handlers here 
}); 

वहाँ संभावित समस्याओं होना नहीं किया जा सका से पहले पूरे पृष्ठ प्रदान की गई पर कोई उपयोगकर्ता एक माउस घटना या एक कुंजीपटल घटना के लिए इनपुट भेजता है?

समस्या पूरे पृष्ठ को प्रस्तुत करने से पहले नहीं है या नहीं। समस्या तब होती है जब jQuery अभी तक लोड नहीं होता है, और उसके बाद कोई उपयोगकर्ता jQuery ईवेंट हैंडलर के माध्यम से संभाला गया कुछ क्लिक करने का प्रयास करता है। तो, अपने प्रश्न का उत्तर देने के लिए; हां, वहां एक संभावित समस्या हो सकती है।

Answer 4

ऐसी परिस्थितियां हैं जहां आप ईवेंट हैंडलरों को तैयार नहीं करना चाहते हैं या नहीं कर सकते क्योंकि आप केवल किसी अन्य घटना के बाद किसी ईवेंट को सक्षम करना चाहते हैं या क्योंकि सामग्री और अन्य जानकारी AJAX के माध्यम से लोड की जा रही है। अधिकांश भाग के लिए तैयार कार्य सही जगह है।

Answer 5

यदि कोई उपयोगकर्ता पूरे पृष्ठ से पहले माउस ईवेंट या कीबोर्ड ईवेंट में इनपुट भेजता है तो संभावित समस्याएं नहीं हो सकतीं? [इस अनुच्छेद] एक स्क्रिप्ट के लिए बात कर रहा है .ready का उपयोग कर नहीं()

सामान्य में, अगर आप एक तत्व जावास्क्रिप्ट से प्रश्न में तत्व पहले से ही पार्स किया गया होगा, यानी का उल्लेख करना चाहते हैं, को जोड़ा गया डोम पेड़ यह लागू होता है कि आप एक ईवेंट हैंडलर (jQuery के साथ या उसके बिना) संलग्न करने की कोशिश कर रहे हैं, इसकी सीएसएस सेटिंग्स या जो कुछ भी बदलें।

.ready() हैंडलर पूरे पृष्ठ गाया होने के लिए इंतजार नहीं है, यह इंतजार कर रहा है पृष्ठ "तैयार" इस ​​अर्थ में कि यह किया गया है में जे एस हेरफेर के लिए होने के लिए के लिए पार्स और पूरे डोम पेड़ है बनाया गया है उस बिंदु पर प्रतिपादन अभी भी हो सकता है, उदाहरण के लिए, छवि तत्वों की वास्तविक सामग्री अभी भी आंशिक रूप से डाउनलोड की जा सकती है।

हालांकि, यह जब तक आप उस पृष्ठ में के बाद शामिल किया गया है प्रश्न में तत्व (रों) एक स्क्रिप्ट ब्लॉक में ऐसा रूप (बिना या) से पहले जावास्क्रिप्ट से तत्वों से छेड़छाड़ शुरू करने के लिए .ready() संभव है स्रोत, क्योंकि ब्राउज़र आपके एचटीएमएल स्रोत से ऊपर से नीचे की पार्सिंग करता है। एक उदाहरण:

<input type="text" id="input1"> 
<script> 
    // following will work, because "input1" already exists 
    $("#input1").change(function() { /* do something */ }); 

    // following will NOT work, because "input2" has not been parsed yet 
    $("#input2").change(function() { /* do something */ }); 
</script> 
<input type="text" id="input2"> 

तो अगर किसी कारण से आप कार्यक्षमता के कुछ महत्वपूर्ण टुकड़ा है कि आप महसूस करते हैं बिल्कुल की स्थापना से पहले .ready() आप ऊपर की तरह कुछ कर सकते हैं चाहिए।

भी ध्यान रखें कि आप .ready() समारोह में सभी करता है, तो आप अपनी स्क्रिप्ट में शामिल हैं शरीर के निचले भाग में, क्योंकि (.ready() साथ के रूप में) उस बिंदु पर सभी तत्वों को पार्स किया गया होगा की जरूरत नहीं है।

जहां आप की आवश्यकता है .ready() बाहरी जेएस फ़ाइल में कोड के लिए है यदि आप सुनिश्चित नहीं कर सकते कि फ़ाइल में कहां रखा जाएगा पृष्ठ पर। यदि इसे <head> अनुभाग में शामिल किया गया है, तो शेष दस्तावेज़ को पार्स किए जाने से पहले इसे निष्पादित किया जाएगा ताकि आपको .ready() का उपयोग करने की आवश्यकता हो।