Максимальний розмір стека викликів перевищив помилку

Я використовую файл бібліотеки JavaScript з прямим веб-видаленням (DWR) і отримую помилку лише в Safari (настільний ПК та iPad)

Він говорить

Максимальний розмір стека викликів перевищено.

Що саме означає ця помилка і чи припиняє її обробку повністю?

Також будь-яке виправлення для Safariвеб-переглядача (насправді на iPad Safari, йдеться

JS: виконання перевищило час очікування

Я припускаю, що це та сама проблема стека викликів)

Це означає, що десь у вашому коді ви викликаєте функцію, яка в свою чергу викликає іншу функцію тощо, поки ви не досягнете ліміту стека викликів.

Це майже завжди через рекурсивну функцію з базовим випадком, яка не виконується.

Перегляд стека

Розглянемо цей код ...

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

Ось стек після кількох дзвінків ...

Як ви бачите, стек викликів зростає, поки не досяг межі: розмір стека в жорсткому коді браузера або виснаження пам'яті.

Для того, щоб виправити це, переконайтеся, що ваша рекурсивна функція має базовий кейс, який можна виконати ...

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

Іноді це можна отримати, якщо випадково імпортувати / вставляти один і той же файл JavaScript двічі, що варто перевірити на вкладці ресурсів інспектора.

У моєму випадку я надсилав вхідні елементи замість їх значень:

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

Замість:

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

Це заморозило мою вкладку Chrome до такої точки, що навіть не показало мені діалогового вікна "Чекати / вбити", коли сторінка перестала відповідати ...

Десь у вашому коді є рекурсивний цикл (тобто функція, яка врешті-решт викликає себе знову і знову, поки стек не заповниться).

Інші веб-переглядачі або мають більший стек (тому замість цього ви отримуєте тайм-аут), або вони чомусь проковтують помилку (можливо, погано розміщена спроба лову).

Використовуйте налагоджувач, щоб перевірити стек викликів, коли сталася помилка.

Проблема з виявленням потокових потоків полягає в тому, що іноді слід стеки розкручується, і ви не зможете побачити, що відбувається насправді.

Я знайшов корисні для цього деякі новіші інструменти для налагодження Chrome.

Удари Performance tab, переконайсяJavascript samples вони включені, і ви отримаєте щось подібне.

Цілком очевидно, де тут перелив! Якщо ви натиснете на нього, extendObjectви зможете фактично побачити в коді точний номер рядка.

Ви також можете побачити таймінги, які можуть чи не можуть бути корисними, або червону оселедець.

Ще один корисний трюк, якщо ви не можете знайти проблему, - це поставити багато console.log тверджень там, де, на вашу думку, проблема. Попередній крок вище може допомогти вам у цьому.

У Chrome, якщо ви неодноразово виводите однакові дані, вони відображатимуться так, показуючи, де проблема чіткіше. У цьому випадку стек потрапив до 7152 кадрів, перш ніж остаточно вийшов з ладу:

У моєму випадку я перетворював великий байтовий масив у рядок, використовуючи наступне:

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

bytes містив кілька мільйонів записів, що занадто велико, щоб вмістити його в стек.

У моєму випадку подія клацання поширюється на дочірньому елементі. Отже, мені довелося сказати наступне:

e.stopPropagation ()

на подію натискання:

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

Ось html-код:

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

Перевірте деталі помилок на консолі панелі інструментів Chrome, це дасть вам функції в стеку викликів та направить вас до рекурсії, яка викликає помилку.

Якщо вам потрібен нескінченний процес / рекурсія з якихось причин, ви можете використовувати веб-роботу в окрему нитку. http://www.html5rocks.com/en/tutorials/workers/basics/

якщо ви хочете маніпулювати елементами dom і перемальовувати, використовуйте анімацію http://creativejs.com/resources/requestanimationframe/

Майже в кожній відповіді тут сказано, що це може бути викликане лише нескінченним циклом. Це неправда, в іншому випадку ви могли би запустити стек через глибоко вкладені дзвінки (не сказати, що це ефективно, але це, безумовно, у царині можливого). Якщо у вас є контроль над JavaScript VM, ви можете налаштувати розмір стека. Наприклад:

node --stack-size=2000

Дивіться також: Як я можу збільшити максимальний розмір стека викликів у Node.js

У моєму випадку два мода jQuery показували складені один на одного. Запобігання тому вирішило мою проблему.

Нещодавно ми додали поле на сайт адміністратора, над яким ми працюємо - contact_type ... просто так? Добре, якщо ви зателефонуєте вибору "type" і спробуєте надіслати це через jquery ajax call, це не вдається з цією помилкою, похованою в jquery.js. Не робіть цього:

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

Проблема полягає в тому, що type: type - я вважаю, що ми називаємо аргумент "type" - проблема з змінною значення з назвою type не є проблемою. Ми змінили це на:

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

І відповідно переписав some_function.php - проблема вирішена.

Перевірте, чи є у вас функція, яка викликає себе. Наприклад

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

Це також може спричинити Maximum call stack size exceededпомилку:

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

Те ж саме:

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

З Документів Mozilla :

Але будьте обережні: використовуючи такий спосіб застосування, ви ризикуєте перевищити ліміт довжини аргументів двигуна JavaScript. Наслідки застосування функції із занадто великою кількістю аргументів (думаю, що це більше десятків тисяч аргументів) різняться між двигунами (JavaScriptCore має жорстко обмежений аргумент 65536), оскільки обмеження (справді навіть характер будь-якого надмірно великого стека поведінка) не визначено. Деякі двигуни викинуть виняток. Більш згубно, інші будуть довільно обмежувати кількість аргументів, фактично переданих застосованій функції. Щоб проілюструвати цей останній випадок: якщо такий двигун мав обмеження в чотири аргументи (фактичні межі, звичайно, значно вищі), було б так, якби аргументи 5, 6, 2, 3 були передані для застосування у наведених вище прикладах, а не повний масив.

Тому спробуйте:

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

Обидва виклики ідентичного коду нижче, якщо зменшено на 1 роботу в Chrome 32 на моєму комп’ютері, наприклад 17905 проти 17904. Якщо запустити так, вони призведуть до помилки "RangeError: Максимальний розмір стека виклику перевищений". Схоже, що ця межа не є жорстким кодом, але залежить від апаратного забезпечення Вашої машини. Здається, що якщо викликати функцію, це обмеження, яке накладається самостійно, є вищим, ніж якщо метод викликається як метод, тобто цей конкретний код використовує менше пам'яті, коли викликається функцією.

Запрошено як метод:

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

ninja.chirp(17905);

Запрошено як функцію:

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

chirp(20889);

ви можете знайти свою рекурсивну функцію в браузері crome, натисніть клавішу ctrl + shift + j, а потім вкладку джерела, яка дає вам потік складання коду, і ви можете знайти, використовуючи крапку в коді.

Я також зіткнувся з подібною проблемою тут - деталі під час завантаження логотипу за допомогою вікна завантаження логотипу, що випадає

<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;
}

перед виправленням мій код був:

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]);
          }

Помилка в консолі:

Я вирішив це, видаливши onclick="$('#filePhoto').click()"з тегу div.

Я зіткнувся з тією ж проблемою, я вирішив це, видаливши ім'я поля, яке було використано двічі на ajax, наприклад

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

Я знаю, що ця тема є давньою, але я думаю, що варто згадати сценарій, що я знайшов цю проблему, щоб вона могла допомогти іншим.

Припустимо, у вас вкладені такі елементи:

<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>

Ви не можете маніпулювати подіями дочірнього елемента всередині події його батьків, оскільки він поширюється на себе, здійснюючи рекурсивні дзвінки, поки не буде скинуто виняток.

Отже цей код не вдасться:

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

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

У вас є два варіанти, щоб цього уникнути:

• Перенесіть дитину назовні від батьків.
• Застосувати функцію stopPropagation до дочірнього елемента.

У мене була ця помилка, оскільки у мене були дві JS-функції з тим самим іменем

Якщо ви працюєте з картами google, то перевірте, чи не передається лат lng new google.maps.LatLngналежного формату. У моєму випадку їх проголошували як невизначені.

Проблема в моєму випадку полягає в тому, що у мене діти мають маршрут з однаковою дорогою з батьком:

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

Тож довелося прибрати лінію дитячого маршруту

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

в моєму випадку я отримую цю помилку під час виклику Ajax, і дані, які я намагався передати цю змінну, не визначилися, це показує мені цю помилку, але не описує цю змінну, не визначену. Я додав, що визначив, що змінна n отримала значення.

Натрапивши на той самий випуск, не змогли зрозуміти, у чому справа, почавши звинувачувати Бабеля;)

Маючи код, який не повертає жодного винятку в браузерах:

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

випуск був погано створений || (або) частина як babel створює власну перевірку типу:

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

так видалення

|| null

змусили дівочу транспіляцію спрацювати.

У моєму випадку я помилково призначив ім’я змінної та val функцію "class_routine_id"

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

це має бути як:

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

у Angular, якщо ви використовуєте mat-select і маєте 400+ варіантів, ця помилка може статися https://github.com/angular/components/isissue/12504

вам доведеться оновити @ углову / матеріальну версію

Я використовую React-Native 0.61.5 разом із ( npm 6.9.0 & node 10.16.1 )

Поки я встановлюю будь-які нові бібліотеки в Project, які я отримав

(наприклад, npm install @ react-navigation / native --save)

Максимальний розмір стека викликів перевищив помилку

для цього я намагаюся

кеш sudo npm clean --force

(Примітка. - Команда внизу зазвичай займає від 1 до 2 хвилин, залежно від розміру кешу в npm )

Іноді трапляється через тип перетворення даних, наприклад, у вас є об'єкт, який ви розглядали як рядок.

socket.id в nodejs або в js-клієнті, наприклад, не є рядком. щоб використовувати його як рядок, потрібно раніше додати слово String:

String(socket.id);

Я намагався призначити змінну, значення, коли ця змінна не була оголошена.

При оголошенні змінної виправлена ​​моя помилка.