时间戳

首页 > 解决方案 > AJAX 冻结网页，并发出警告说浏览器变慢

javascript - AJAX 冻结网页，并发出警告说浏览器变慢

问题描述

我正在利用 AJAX 调用向 Alpha Vantage API 发出请求，并在每次按键搜索时返回带有股票代码/股票代码数据的 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 。

但是，当在我的网站上运行此网页时，它会导致页面在所有浏览器中无响应并冻结，并且仅有时会autocomplete()响应并正常工作。我认为我的页面上必须有另一个脚本导致超时，但页面仅在输入文本框/搜索框时冻结。所以我认为 AJAX 有问题；要么它没有正确运行它的异步特性，要么它在 API 调用上用太多数据阻塞了网页的管道。

另外，我知道我不应该将我的 API 密钥放在 JavaScript 这样的客户端代码中，而应该放在服务器端代码中，但是很难以autocomplete()这种方式实现方法。它也不是敏感的 API 密钥。

标签： javascriptajax

解决方案

由于这是对大量数据的请求，因此 AJAX 需要在浏览器设置的超时时间中有足够的时间来检索数据。简单地添加"timeout": 1000000到 AJAX 调用对我来说就可以了。明白这一点：默认情况下，没有为 AJAX 调用设置超时！所以真的，你应该总是为 AJAX 调用设置超时 - 特别是对于批量数据请求 - 这个问题是可以避免的。另外，确保cache设置为false，因此不会分配太多内存。

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

推荐阅读