AJAX зависает веб-страница, выдавая предупреждение о замедлении работы браузера

Question

Я использую вызов AJAX, чтобы сделать запрос к API Alpha Vantage и вернуть JSON с данными по биржевым символам / тикерам при поиске по каждой клавише:

function edValueKeyPress() {
     var keywords = document.getElementById("TextBox89").value;
     if (keywords.length >= 2) {
        var settings = {
            "async": true,
            "crossDomain": true,
            "url": "https://www.alphavantage.co/query?function=SYMBOL_SEARCH&keywords=" + keywords + "&apikey=B8ARVH4ULKOPMDOT",
            "method": "GET"
        }

        $.ajax(settings).done(function (response) {
             var keywordsArray = [];
             var json = response["bestMatches"];
             for (var i = 0; i < json.length; i++) {
                 keywordsArray.push(json[i]["1. symbol"] + " - " + json[i]["2. name"]);
             }
             $("#TextBox89").autocomplete({
                  source: keywordsArray
             });
        });
     }
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Enter stock symbol/ticker: <input id="TextBox89" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()">

Как ясно видно из моего фрагмента кода, биржевые символы и названия компаний взяты из метода jqueryui autocomplete(), и он работает. Он также работает в этом CodePen: https://codepen.io/max-voisard/pen/jOPERRd.

Однако при запуске на моем веб-сайте на этой веб-странице он приводит к тому, что страница go не отвечает и зависает во всех браузерах, и только иногда autocomplete() отвечает и работает. Я думаю, что на моей странице должен быть другой скрипт, вызывающий тайм-аут, но страница зависает только при вводе ввода в текстовое поле / поле поиска. Так что я думаю, что с AJAX что-то не так; либо он не выполняет свою асинхронную природу должным образом, либо он забивает каналы веб-страницы слишком большим количеством данных при вызове API.

Кроме того, я знаю, что не должен помещать свой ключ API в код на стороне клиента как JavaScript и вместо этого в коде на стороне сервера, но трудно реализовать метод autocomplete() таким способом. Это также не секретный ключ API.

Answer 1

Поскольку это был запрос больших объемов данных, для AJAX требовалось достаточно времени в тайм-ауте, установленном из браузера, для получения данных. Простое добавление "timeout": 1000000 к вызову AJAX помогло мне. Получите это: по умолчанию тайм-аут для вызова AJAX не установлен! В действительности, вы должны всегда устанавливать таймауты для AJAX вызовов - особенно для массовых запросов данных - и этой проблемы можно было значительно избежать. Также убедитесь, что для cache установлено значение false, чтобы не было выделено слишком много памяти.

$.ajax({
    "timeout": 1000000,
    "cache": false
});