Maksimum çağrı yığını boyutu aşıldı hatası

Direct Web Remoting (DWR) JavaScript kitaplık dosyası kullanıyorum ve yalnızca Safari'de (masaüstü ve iPad) bir hata alıyorum

Diyor ki

Maksimum arama yığını boyutu aşıldı.

Bu hata tam olarak ne anlama geliyor ve tamamen işlenmeyi durduruyor mu?

Ayrıca herhangi bir düzeltme SafariAslında tarayıcıyla ( iPad Safari, diyor

JS: yürütme zaman aşımını aştı

hangi aynı çağrı yığını sorunu olduğunu varsayalım)

Bu, kodunuzda bir yerde, çağrı yığını sınırına ulaşana kadar başka bir işlevi çağıran bir işlevi çağırdığınız anlamına gelir.

Bu neredeyse her zaman karşılanmayan bir temel vaka ile özyinelemeli bir işlevden kaynaklanır.

Yığını görüntüleme

Bu kodu düşünün ...

(function a() {
    a();
})();

İşte bir avuç görüşmeden sonra yığın ...

Gördüğünüz gibi, çağrı yığını bir sınıra ulaşana kadar büyür: tarayıcı sabit kodlu yığın boyutu veya bellek tükenmesi.

Düzeltmek için, özyinelemeli işlevinizin karşılanabilecek bir temel kasaya sahip olduğundan emin olun ...

(function a(x) {
    // The following condition 
    // is the base case.
    if ( ! x) {
        return;
    }
    a(--x);
})(10);

Bazen, aynı JavaScript dosyasını yanlışlıkla iki kez içe aktarırsanız / eklerseniz, denetçinin kaynaklar sekmesinde kontrol etmeye değer olabilir.

Benim durumumda, değerleri yerine giriş öğeleri gönderiyordum:

$.post( '',{ registerName: $('#registerName') } )

Onun yerine:

$.post( '',{ registerName: $('#registerName').val() } )

Bu, Chrome sekmemi, sayfanın yanıt vermediği zaman bana 'Bekle / Öldür' iletişim kutusunu göstermediği bir noktaya kadar dondu ...

Kodunuzda bir yerde özyinelemeli bir döngü vardır (yani, yığın dolana kadar kendini tekrar tekrar çağıran bir işlev).

Diğer tarayıcıların ya daha büyük yığınları vardır (bunun yerine zaman aşımına uğrarsınız) ya da bir nedenden dolayı hatayı yutuyorlar (belki de kötü yerleştirilmiş bir try-catch).

Hata oluştuğunda çağrı yığınını kontrol etmek için hata ayıklayıcıyı kullanın.

Stackoverflow'ları tespit etme ile ilgili problem bazen yığın izinin gevşemesidir ve gerçekte neler olduğunu göremezsiniz.

Chrome'un bazı yeni hata ayıklama araçlarını bunun için yararlı buldum.

Düğmesine basın, etkin Performance tabolduğundan emin olun Javascript samplesve böyle bir şey alırsınız.

Taşmanın burada olduğu oldukça açık! Üzerine extendObjecttıklarsanız, koddaki tam satır numarasını görebilirsiniz.

Ayrıca yararlı olabilecek veya olmayabilecek zamanlamaları veya kırmızı bir ringa balığı görebilirsiniz.

Sorunu gerçekten bulamıyorsanız bir başka yararlı hile, sorunun console.logolduğunu düşündüğünüz yere çok sayıda ifade koymaktır . Yukarıdaki önceki adım size bu konuda yardımcı olabilir.

Chrome'da tekrar tekrar aynı verileri çıkarırsanız, sorunun daha net olduğu yeri gösteren şekilde görüntülenir. Bu durumda, yığın nihayet çökmeden önce 7152 kareyi vurdu:

Benim durumumda, büyük bir bayt dizisini aşağıdakileri kullanarak bir dizeye dönüştürüyordum:

String.fromCharCode.apply(null, new Uint16Array(bytes))

bytes yığına sığmayacak kadar büyük birkaç milyon girdi içeriyordu.

Benim durumumda, alt öğe üzerinde tıklama olayı yayılıyor. Bu yüzden aşağıdakileri koymak zorunda kaldım:

e.stopPropagation ()

tıklama etkinliğinde:

 $(document).on("click", ".remove-discount-button", function (e) {
           e.stopPropagation();
           //some code
        });
 $(document).on("click", ".current-code", function () {
     $('.remove-discount-button').trigger("click");
 });

İşte html kodu:

 <div class="current-code">                                      
      <input type="submit" name="removediscountcouponcode" value="
title="Remove" class="remove-discount-button">
   </div>

Chrome geliştirici araç çubuğu konsolundaki hata ayrıntılarını kontrol edin, bu size çağrı yığınındaki işlevleri verecektir ve sizi hataya neden olan özyinelemede yönlendirecektir.

Herhangi bir nedenle sonsuz bir işleme / özyinelemeye ihtiyacınız varsa, ayrı bir iş parçacığında bir webworker kullanabilirsiniz. http://www.html5rocks.com/en/tutorials/workers/basics/

dom öğelerini değiştirmek ve yeniden çizmek istiyorsanız, http://creativejs.com/resources/requestanimationframe/ animasyonunu kullanın

Buradaki neredeyse her cevap, bunun sadece sonsuz bir döngüden kaynaklanabileceğini belirtir. Bu doğru değil, aksi takdirde yığını derinden iç içe çağrılarla aşırı çalıştırabilirsiniz (bunun etkili olduğunu söylemek değil, ama kesinlikle mümkün olan yerde). JavaScript VM'niz üzerinde kontrolünüz varsa, yığın boyutunu ayarlayabilirsiniz. Örneğin:

node --stack-size=2000

Ayrıca bkz: Node.js dosyasındaki maksimum çağrı yığını boyutunu nasıl artırabilirim?

Benim durumumda, iki jQuery modals üst üste yığılmış gösteriliyordu. Bunu önlemek sorunumu çözdü.

Son zamanlarda üzerinde çalıştığımız bir yönetici sitesine bir alan ekledik - contact_type ... kolay değil mi? Eğer "type" seçeneğini seçerseniz ve bunu jquery ajax çağrısı ile göndermeye çalışırsanız, jquery.js'de gömülü olan bu hatayla başarısız olur. Bunu yapma:

$.ajax({
    dataType: "json",
    type: "POST",
    url: "/some_function.php",
    data: { contact_uid:contact_uid, type:type }
});

Sorun şudur: type: type - bize "type" argümanını isimlendirdiğimize inanıyorum - type adlı bir değer değişkenine sahip olmak sorun değildir. Bunu şu şekilde değiştirdik:

$.ajax({
    dataType: "json",
    type: "POST",
    url: "/some_function.php",
    data: { contact_uid:contact_uid, contact_type:type }
});

Ve buna göre some_function.php yazdı - problem çözüldü.

Kendini çağıran bir işleviniz olup olmadığını kontrol edin. Örneğin

export default class DateUtils {
  static now = (): Date => {
    return DateUtils.now()
  }
}

Bu ayrıca bir Maximum call stack size exceededhataya neden olabilir :

var items = [];
[].push.apply(items, new Array(1000000)); //Bad

Burada aynı:

items.push(...new Array(1000000)); //Bad

Gönderen Mozilla Dokümanlar :

Ancak dikkat: Uygulamayı bu şekilde kullanırken, JavaScript motorunun bağımsız değişken uzunluk sınırını aşma riskiniz vardır. Çok fazla bağımsız değişkeni olan bir işlevi uygulamanın sonuçları (on binlerce argümandan fazla düşünün) motorlar arasında farklılık gösterir (JavaScriptCore'un sabit kodlu argüman sınırı 65536'dır), çünkü sınır (hatta aşırı büyük yığınların doğası bile) davranış) belirtilmemiş. Bazı motorlar bir istisna atar. Daha da önemlisi, diğerleri keyfi olarak uygulanan işleve iletilen argüman sayısını sınırlandıracaktır. Bu son durumu göstermek için: eğer böyle bir motor dört argüman sınırına sahip olsaydı (gerçek sınırlar elbette önemli ölçüde daha yüksekse), yukarıdaki örneklerde uygulanacak 5, 6, 2, 3 argümanlarının geçirilmiş olması gibi olurdu, tam dizi yerine.

O zaman dene:

var items = [];
var newItems = new Array(1000000);
for(var i = 0; i < newItems.length; i++){
  items.push(newItems[i]);
}

Bilgisayarımdaki Chrome 32'de 1 çalışmayla azalırsa aşağıdaki aynı kodun her iki çağrılması da örn. 17905 vs 17904. Olduğu gibi çalıştırılırsa "RangeError: Maksimum çağrı yığını boyutu aşıldı" hatasını verir. Bu sınır sabit kodlanmış değil, ancak makinenizin donanımına bağlıdır. Bir işlev olarak çağrıldığında, bu kendi kendine yüklenen sınırın bir yöntem olarak çağrıldığından daha yüksek olduğu, yani bu özel kodun bir işlev olarak çağrıldığında daha az bellek kullandığı görülmektedir.

Yöntem olarak çağrıldı:

var ninja = {
    chirp: function(n) {
        return n > 1 ? ninja.chirp(n-1) + "-chirp" : "chirp";
    }
};

ninja.chirp(17905);

İşlev olarak çağrıldı:

function chirp(n) {
    return n > 1 ? chirp( n - 1 ) + "-chirp" : "chirp";
}

chirp(20889);

yinelemeli işlevinizi crome tarayıcıda bulabilir, ctrl + shift + j tuşlarına ve ardından kaynak sekmesi, kod derleme akışı sağlar ve koddaki kırılma noktasını kullanarak bulabilirsiniz.

Burada da benzer bir sorunla karşılaştım, açılır logo yükleme kutusunu kullanarak logo yüklerken ayrıntılar

<div>
      <div class="uploader greyLogoBox" id="uploader" flex="64" onclick="$('#filePhoto').click()">
        <img id="imageBox" src="{{ $ctrl.companyLogoUrl }}" alt=""/>
        <input type="file" name="userprofile_picture"  id="filePhoto" ngf-select="$ctrl.createUploadLogoRequest()"/>
        <md-icon ng-if="!$ctrl.isLogoPresent" class="upload-icon" md-font-set="material-icons">cloud_upload</md-icon>
        <div ng-if="!$ctrl.isLogoPresent" class="text">Drag and drop a file here, or click to upload</div>
      </div>
      <script type="text/javascript">
          var imageLoader = document.getElementById('filePhoto');
          imageLoader.addEventListener('change', handleImage, false);

          function handleImage(e) {
              var reader = new FileReader();
              reader.onload = function (event) {

                  $('.uploader img').attr('src',event.target.result);
              }
              reader.readAsDataURL(e.target.files[0]);
          }
      </script>
      </div>

CSS.css

.uploader {
  position:relative;
  overflow:hidden;
  height:100px;
  max-width: 75%;
  margin: auto;
  text-align: center;

  img{
    max-width: 464px;
    max-height: 100px;
    z-index:1;
    border:none;
  }

  .drag-drop-zone {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 32px;
  }
}

.uploader img{
  max-width: 464px;
  max-height: 100px;
  z-index:1;
  border:none;
}



.greyLogoBox {
  width: 100%;
  background: #EBEBEB;
  border: 1px solid #D7D7D7;
  text-align: center;
  height: 100px;
  padding-top: 22px;
  box-sizing: border-box;
}


#filePhoto{
  position:absolute;
  width:464px;
  height:100px;
  left:0;
  top:0;
  z-index:2;
  opacity:0;
  cursor:pointer;
}

düzeltmeden önce kodum:

function handleImage(e) {
              var reader = new FileReader();
              reader.onload = function (event) {
                  onclick="$('#filePhoto').click()"
                  $('.uploader img').attr('src',event.target.result);
              }
              reader.readAsDataURL(e.target.files[0]);
          }

Konsoldaki hata:

onclick="$('#filePhoto').click()"Div etiketinden kaldırarak çözdüm.

Aynı sorunla karşı karşıya kaldım, ajax'ta iki kez kullanılan bir alan adını kaldırarak çözdüm.

    jQuery.ajax({
    url : '/search-result',
    data : {
      searchField : searchField,
      searchFieldValue : searchField,
      nid    :  nid,
      indexName : indexName,
      indexType : indexType
    },
.....

Bu iş parçacığı eski biliyorum, ama ben başkalarına yardımcı olabilir bu yüzden bu sorunu buldum senaryo bahsetmeye değer olduğunu düşünüyorum.

Diyelim ki böyle iç içe öğeleriniz var:

<a href="#" id="profile-avatar-picker">
    <span class="fa fa-camera fa-2x"></span>
    <input id="avatar-file" name="avatar-file" type="file" style="display: none;" />
</a>

Üst öğe olayındaki alt öğe olaylarını değiştiremezsiniz çünkü kendi kendine yayılır ve istisna atılıncaya kadar yinelemeli çağrılar yapar.

Yani bu kod başarısız olur:

$('#profile-avatar-picker').on('click', (e) => {
    e.preventDefault();

    $('#profilePictureFile').trigger("click");
});

Bundan kaçınmak için iki seçeneğiniz vardır:

• Çocuğu ebeveynin dışına taşıyın.
• Alt öğeye stopPropagation işlevini uygulayın .

Aynı ada sahip iki JS İşlevim olduğu için bu hatayı aldım

Google haritalarla çalışıyorsanız, lat lng'nin aktarılıp aktarılmadığını kontrol edin new google.maps.LatLng. Benim durumumda tanımsız olarak geçiyorlardı.

Benim durumumdaki sorun, ben ebeveyn ile aynı yol ile çocuk rota var çünkü:

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'prefix' },
      { path: 'home', loadChildren: './home.module#HomeModule' },
    ]
  }
];

Bu yüzden çocuk rotasının hattını kaldırmak zorunda kaldım

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      { path: 'home', loadChildren: './home.module#HomeModule' },
    ]
  }
];

benim durumumda bu hatayı ajax çağrısında alıyorum ve bu değişkeni iletmeye çalıştığım veriler tanımlanmadı, bu hatayı gösteriyor ama tanımlanmamış değişkeni tanımlamıyor. Ben değişken n değeri var tanımladı ekledi.

Aynı sorunla karşılaştık, neyin yanlış olduğunu çözemedi Babil'i suçlamaya başladı;)

Kodların tarayıcılarda herhangi bir istisna döndürmemesi:

if (typeof document.body.onpointerdown !== ('undefined' || null)) {

sorun kötü oluşturuldu || (veya) babil kendi tip kontrolünü oluştururken bölüm:

function _typeof(obj){if(typeof Symbol==="function"&&_typeof(Symbol.iterator)==="symbol")

yani kaldırmak

|| null

babil transpilasyonu yaptı.

Benim durumumda ben yanlışlıkla aynı değişken adı ve val fonksiyonu "class_routine_id" atadı

var class_routine_id = $("#class_routine_id").val(class_routine_id);

şöyle olmalı:

 var class_routine_id = $("#class_routine_id").val(); 

Angular'da, mat-select kullanıyorsanız ve 400+ seçeneğiniz varsa, bu hata https://github.com/angular/components/issues/12504 şeklinde oluşabilir.

@ açısal / malzeme sürümünü güncellemelisiniz

React-Native 0.61.5 ile birlikte kullanıyorum ( npm 6.9.0 ve düğüm 10.16.1 )

Project'te yeni kütüphaneler yüklerken,

(örn. npm install @ tepki-navigasyon / yerel - kaydetme)

Maksimum çağrı yığını boyutu aşıldı hatası

bunun için deniyorum

sudo npm önbellek temiz - kuvvet

(Not: - Aşağıdaki komut npm önbellek boyutunuza bağlı olarak genellikle 1 ila 2 dakika sürer )

Bazen dönüştürme veri türü nedeniyle oldu, örneğin dize olarak düşündüğünüz bir nesneniz var.

Soket.id nodejs içinde js istemcisinde örnek olarak bir dize değildir. onu dize olarak kullanmak için önce Dize kelimesini eklemeniz gerekir:

String(socket.id);

Bu değişken bildirilmediğinde bir değişken, bir değer atamaya çalışıyordum.

Değişkeni bildirmek hatamı düzeltti.