Chrome / jQuery Yakalanmamış Aralık Hatası: Maksimum çağrı yığını boyutu aşıldı


113

Chrome'da "Yakalanmamış Aralık Hatası: Maksimum çağrı yığını boyutu aşıldı" hatasını alıyorum. jQuery işlevim burada

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

Sayfada on binlerce hücre olduğunu unutmayın. Bununla birlikte, genellikle yığın taşmalarını özyineleme ile ilişkilendiririm ve bu durumda görebildiğim kadarıyla hiçbiri yoktur.

Bunun gibi bir lambda oluşturmak yığın üzerinde otomatik olarak bir yük oluşturur mu? etrafında herhangi bir yol var mı?

Şu anda sahip olduğum tek çözüm, HTML'yi işlerken her hücrede açık bir şekilde onclick olaylarını oluşturmaktır, bu da HTML'yi çok daha büyük hale getirir.


2
Foo işlevinin yinelenmediğinden emin misiniz? Bu işlev çağrısını kaldırırsanız hata yine de oluyor mu?
STH

1
Diğer tarayıcılarda beklendiği gibi çalışıyor mu? Bu hata, foo($('#docId').val(), $(this).attr('id'));satırı yorumladığınızda ortaya çıkıyor mu? - Ekstra performans ipucu: seçicilerin sonucunu önbelleğe alın - örneğin sonucunu $(this)bir değişkende tutun ve daha sonra bunu gerektiği şekilde işleyicinizde kullanın.
WTK

Benzer bir sorunum var ancak mouseenter olaylarına ihtiyacım var. Gövde veya tabloyu kullanırken yeterince olay alamıyorum.
ericslaw

Yanıtlar:


133

"Sayfada on binlerce hücre olduğundan", tıklama olayını her bir hücreye bağlamak korkunç bir performans sorununa neden olacaktır. Bunu yapmanın daha iyi bir yolu var, bu bir tıklama olayını gövdeye bağlamak ve ardından hücre öğesinin tıklamanın hedefi olup olmadığını bulmaktır. Bunun gibi:

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

Bu yöntem, görevinizi yalnızca yerel "td" etiketiyle değil, daha sonra eklenen "td" ile de yapacaktır. Etkinlik bağlama ve delege hakkındaki bu makaleyle ilgileneceğinizi düşünüyorum


Veya aynı efektle jQuery'nin " .on () " yöntemini kullanabilirsiniz :

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

teşekkürler, yine de bu konuda performans için mücadele ediyoruz, bu yüzden bu harika bir fikir :-)
Andy,

60
Nooo, .live () kullanmayın !!! bitovi.com/blog/2011/04/… Bir .delegate () (veya jQuery'niz yeterince yeniyse .on ()) kullanın ve tüm belge yerine tablo düzeyinden yetki verin. Bu, performansınızı yalnızca .live () kullanmaktan çok daha fazla artıracak, bu da esasen tüm belgeden aşağıya yetki verecektir.
brandwaffle

19
Ve .live, jQuery 1.9'dan kaldırıldı
cpuguy83

37

Sonsuz bir döngünüz olduğunda da bu hatayı alabilirsiniz. Hiç bitmeyen, özyinelemeli öz referanslarınız olmadığından emin olun.


6
Bu benim sorunumu çözdü. Bir <a id="linkDrink" onclick="drinkBeer();">Drink</a>ve bir $('#linkDrink').click();giriş yaptım drinkBeer().
Aycan Yaşıt 01

7

Benimki daha çok bir hataydı, olan şey döngü tıklamasıydı (sanırım) temelde girişe tıklanarak ebeveyn de tıklandı ve bu da Maksimum çağrı yığını boyutunun aşılmasına neden oldu.

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

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

3

Bu sorun bende jQUery Fancybox'ı diğer birçok jQuery eklentisiyle birlikte bir web sitesinde kullandığımda oldu. Fancybox yerine LightBox'ı ( burada site ) kullandığımda sorun ortadan kalktı.


1

Kullanabilirsin

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

0

Geçenlerde bu sorunla da karşılaştım. Diyalog div'de çok büyük bir masam vardı. 15.000'den fazla satırdı. Diyalog div'de .empty () çağrıldığında, yukarıdaki hatayı alıyordum.

İletişim kutusunu temizlemeyi aramadan önce, çok büyük tablodan diğer tüm satırları kaldırıp .empty () 'yi çağırdığım yuvarlak bir çözüm buldum. Yine de işe yaramış gibiydi. Görünüşe göre eski JQuery sürümüm bu kadar büyük öğeleri işleyemiyor.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.