我正在通过JQuery执行相当长的异步ajax GET请求(〜120 MB,耗时约12s),它冻结了UI。
据我有限的理解,它不应该发生,因为它是异步的。我尝试了在网上找到的建议,例如指定“ async:true”。
这是我在chrome中本地运行的简化测试代码,并使用“ --user-data-dir --disable-web-security”键进行跨站点请求:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test.js</title>
</head>
<body>
<button id="b1">Button1</button>
<select>
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
</select>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function test(){
console.log("GET start");
$.ajax({
url: 'https://twitchemotes.com/api_cache/v3/subscriber.json',
method: 'GET',
async: true,
success: function () {
console.log("GET completed");
}
});
console.log("after GET");
}
$(document).ready(()=>{
$("#b1").click(test);
});
</script>
</body>
</html>
按下按钮后,UI(例如选择框)在请求时间内停止响应。感觉浏览器正在接受所有响应数据。
我看到了类似的问题,但是答案不适合我的环境。
请有人能说明为什么会发生这种情况以及可能有什么解决方法。