Ошибка неперехваченного диапазона; Превышен максимальный размер стека вызовов

#jquery #typeerror

#jquery #ошибка типа

Вопрос:

Я пытаюсь вывести список данных из источника JSON.

Я зацикливаю данные в $.each и отображаю их с помощью append .

 var result = JSON.parse(response);

if(result.count != 0) {
    $(".modal").find("#search-results").html("<p>"   result.count   " result(s) found:</p>");
    var list = $(".modal").find("#search-results").append("<div class="list-group dbsearch-list-group"></div>").find('div');
    $.each(result.results, function(index, value) {
        var link = list.append('<a href="javascript:;" class="list-group-item p-0 list-group-item-action" id="autosearch" data-id="'   value.itemid   '" data-instantclose="true"></a>').find('a');
        var col = link.append('<div class="row"></div>').find('div');
            col.append('<div class="col-sm py-0 col-md-auto"><img src="'   value.icon   '" class="dbsearch-icon" /></div>');
            col.append('<div class="col-sm py-0 align-self-center">'   value.title   '</div>');
    });
} else {
    $(".modal").find("#search-results").html("<p>No results found.</p>");
}

По какой-то странной причине он выдает ошибку после пары циклов:

jquery-3.3.1.min.js: 2 Ошибка неперехваченного диапазона: превышен максимальный размер стека вызовов

Я погуглил ошибку, и они говорят, что это вызвано бесконечным циклом. Записи ответов в формате JSON могут быть довольно длинными, около 300 элементов.

Даже тогда это не должно выводить это, если я прав. Почему это происходит?

1. Это вызвано бесконечной рекурсией, а не бесконечным циклом.

2. Если вы посмотрите в стек вызовов в отладчике JavaScript, вы должны увидеть, какая функция вызывается повторно.

3. @Barmar Извините, где я могу это найти?

4. На вкладке Источники инструментов разработчика.

5. @Barmar Я приостановил страницу после того, как она зависла: i.imgur.com/bICsdeo.png

Ответ №1:

Я не думаю, что ваши связанные функции вида:

 x = y.append("some HTML element").find("type of that element");

делаем то, что вы ожидаете. Я думаю, вы пытаетесь установить x для элемента, который вы только что добавили. Но на самом деле это устанавливает его в коллекцию из всех элементов, которые были добавлены до сих пор. И когда y является одной из этих коллекций, вы добавляете новый HTML ко всем из них, а затем находите все элементы, которые были добавлены таким образом. Это вызывает экспоненциальный рост количества создаваемых и добавляемых элементов.

Я думаю, вы хотите вот чего:

 x = $("some HTML element").appendTo(y);

Таким образом, полный код должен быть:

 var result = JSON.parse(response);

if(result.count != 0) {
    $(".modal").find("#search-results").html("<p>"   result.count   " result(s) found:</p>");
    var list = $("<div class="list-group dbsearch-list-group"></div>").appendTo(".modal");
    $.each(result.results, function(index, value) {
        var link = $('<a href="javascript:;" class="list-group-item p-0 list-group-item-action" id="autosearch" data-id="'   value.itemid   '" data-instantclose="true"></a>').appendTo(list);
        var col = $('<div class="row"></div>').appendTo(link);
        col.append('<div class="col-sm py-0 col-md-auto"><img src="'   value.icon   '" class="dbsearch-icon" /></div>');
        col.append('<div class="col-sm py-0 align-self-center">'   value.title   '</div>');
    });
} else {
    $(".modal").find("#search-results").html("<p>No results found.</p>");
}