Chrome / jQuery के अन्‍लोड किए गए रेंजएयर: अधिकतम कॉल स्‍टैक आकार को पार कर गया है


113

मुझे क्रोम पर "अनकॉन्डेड रेंजएयर: अधिकतम कॉल स्टैक आकार" पार करने में त्रुटि हो रही है। यहाँ मेरा jQuery फ़ंक्शन है

$('td').click(function () {
        if ($(this).context.id != null && $(this).context.id != '') {
            foo($('#docId').val(), $(this).attr('id'));
        }
        return false;
    });

ध्यान दें कि पृष्ठ में हजारों कोशिकाएं हैं। हालाँकि, मैं आमतौर पर स्टैक ओवरफ्लो को पुनरावृत्ति के साथ जोड़ता हूं और इस मामले में जहां तक ​​मैं देख सकता हूं कि कोई भी नहीं है।

इस तरह से एक मेमने का निर्माण स्वचालित रूप से स्टैक पर सामान का भार उत्पन्न करता है? क्या इसका कोई तरीका है?

फिलहाल मेरे पास केवल एक ही हल है कि HTML को रेंडर करते समय प्रत्येक सेल पर स्पष्ट रूप से ऑनक्लिक घटनाओं को उत्पन्न किया जाए, जो HTML को अधिक बड़ा बनाता है।


2
क्या आप सुनिश्चित हैं कि फू फंक्शन की पुनरावृत्ति नहीं होती है? यदि आप उस फ़ंक्शन कॉल को निकालते हैं तो क्या त्रुटि तब भी होती है?
sth

1
क्या यह अन्य ब्राउज़रों में अपेक्षित रूप से काम करता है? जब आप foo($('#docId').val(), $(this).attr('id'));लाइन में टिप्पणी करते हैं तो क्या यह त्रुटि उत्पन्न होती है ? - अतिरिक्त प्रदर्शन टिप: चयनकर्ताओं के परिणाम को कैश करें - उदाहरण के लिए परिणाम को $(this)एक चर में रखें और आवश्यकतानुसार इसे अपने हैंडलर में उपयोग करें।
डब्ल्यूटीके

मेरे पास एक समान मुद्दा है, लेकिन माउसेंटर इवेंट्स की आवश्यकता है। बॉडी या टेबल का उपयोग करते समय मुझे पर्याप्त घटनाएँ नहीं आती हैं।
ericslaw

जवाबों:


133

जैसा कि "पेज में हजारों कोशिकाएं हैं" क्लिक-ईवेंट को हर एक सेल में बाँधने से एक भयानक प्रदर्शन समस्या होगी। ऐसा करने का एक बेहतर तरीका है, जो शरीर के लिए एक क्लिक इवेंट को बाइंड कर रहा है और फिर यह पता लगाना है कि सेल तत्व क्लिक का लक्ष्य था या नहीं। ऐशे ही:

$('body').click(function(e){
       var Elem = e.target;
       if (Elem.nodeName=='td'){
           //.... your business goes here....
           // remember to replace $(this) with $(Elem)
       }
})

यह विधि न केवल आपके कार्य को "td" टैग के साथ करेगी, बल्कि बाद में "td" के साथ भी किया जाएगा। मुझे लगता है कि आप इवेंट बाइंडिंग और डेलीगेट के बारे में इस लेख में रुचि लेंगे


या आप बस एक ही प्रभाव के साथ jQuery के " .on () " विधि का उपयोग कर सकते हैं :

$('body').on('click', 'td', function(){
        ...
});

धन्यवाद, हम इस पर वैसे भी प्रदर्शन के लिए संघर्ष कर रहे हैं, इसलिए यह एक महान विचार है :-)
एंडी

60
Nooo, .live () का उपयोग न करें !!! bitovi.com/blog/2011/04// यदि आपका jQuery पर्याप्त नया है तो एक .delegate () (या .on () का उपयोग करें, और पूरे दस्तावेज़ के बजाय तालिका स्तर से प्रतिनिधि बनाएं। यह सिर्फ (।) का उपयोग करने की तुलना में आपके प्रदर्शन में बहुत अधिक सुधार करेगा, जो अनिवार्य रूप से पूरे दस्तावेज़ को नीचे से केवल प्रस्तुत करेगा।
21

19
और
.live

37

अनंत लूप होने पर आप यह त्रुटि भी प्राप्त कर सकते हैं। सुनिश्चित करें कि आपके पास कोई असमान, पुनरावर्ती स्वयं संदर्भ नहीं है।


6
इससे मेरी समस्या हल हो गई। मेरे पास एक है <a id="linkDrink" onclick="drinkBeer();">Drink</a>, और एक $('#linkDrink').click();में है drinkBeer()
ऐकान यिसट

7

मेरी एक गलती थी, जो हुआ वह था लूप क्लिक (मुझे लगता है) मूल रूप से लॉगिन पर क्लिक करके अभिभावक को भी क्लिक किया गया था, जो कि समाप्त हो गया था, जिससे अधिकतम कॉल स्टैक का आकार पार हो गया था।

$('.clickhere').click(function(){
   $('.login').click();
});

<li class="clickhere">
  <a href="#" class="login">login</a>
</li>

3

मेरे साथ यह समस्या तब हुई जब मैंने एक वेबसाइट के अंदर jquery Fancybox का उपयोग किया, जिसमें कई अन्य jQuery प्लगइन्स थे। जब मैंने फैंसीबॉक्स की जगह लाइटबॉक्स ( यहां साइट ) का उपयोग किया, तो समस्या दूर हो गई है।


1

यू का उपयोग कर सकते हैं

  $(document).on('click','p.class',function(e){
   e.preventDefault();
      //Code 
   });

0

मैं हाल ही में इस मुद्दे में भी भाग गया। डायलॉग डिव में मेरी एक बहुत बड़ी टेबल थी। यह 15,000 पंक्तियों का था। जब .empty () डायलॉग डिव पर कॉल किया गया था, तो मुझे ऊपर त्रुटि हो रही थी।

मुझे एक गोल-गोल समाधान मिला, जहां मैं संवाद बॉक्स को साफ करने से पहले कॉल करता हूं, मैं बहुत बड़ी तालिका से हर दूसरी पंक्ति को हटा दूंगा, फिर .empty () को कॉल करूंगा। ऐसा लगता था कि काम किया है। ऐसा लगता है कि JQuery का मेरा पुराना संस्करण इतने बड़े तत्वों को संभाल नहीं सकता है।

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