大的Ajax异步请求冻结了UI

时间:2018-07-06 14:35:06

标签: javascript jquery ajax

我正在通过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(例如选择框)在请求时间内停止响应。感觉浏览器正在接受所有响应数据。

我看到了类似的问题,但是答案不适合我的环境。

请有人能说明为什么会发生这种情况以及可能有什么解决方法。

0 个答案:

没有答案