Question

我有一个简单的应用程序，单击该按钮会对Express服务器进行Ajax调用（异步）。

在Express路由处理程序中，我通过循环来模拟一个长时间运行的操作（这只是一个演示，将来我打算在这里对Java REST API做一个远程请求）。

结果是UI在这里冻结（加载图像在此期间甚至没有显示）。你能帮我在这里发现问题吗？以下是代码（我尝试过使用POST和GET方法，仍然是同样的问题）：

客户端

$('#searchBtn').click(function () {
    $.ajax({
        type: 'GET',
        url: 'searchRepo',
        async: true,
        beforeSend: function () {
            $('#testDiv').html('');
            $('#loadingIc').show();
        },
        complete: function() {
            $('#loadingIc').hide();
        },
        success: function (result) {
            $('#testDiv').html('<div>Test</div>');
        }
    });
});

服务器

router.get('/searchRepo', function (req, res) {
   sleep(10000);
   res.send('aaaaa');
});
function sleep(milliseconds) {
   var start = new Date().getTime();
   for (var i = 0; i < 1e7; i++) {
   if ((new Date().getTime() - start) > milliseconds){
      break;
   }
}

Answer 1

首先，将您的服务器代码更改为：

router.get('/searchRepo', function (req, res) {
   setTimeout(function() {
       res.send('aaaaa');
   }, 10000);
});

因为这可以更准确地模拟长时间运行的远程请求。

第二关，为你的ajax代码添加一个错误处理程序，这样如果你遇到超时或一些错误，你就会知道发生了这种情况。

您的sleep()版本正在查杀您的单线程node.js服务器，因此它在10秒内无法执行任何操作。如果您的网页正在等待node.js服务器提供的其他资源（样式表，脚本文件等等），那么它将等待您的服务器无法使用。

我没有在您的代码中看到任何会“冻结”浏览器的内容。您正在使用async: true来避免冻结浏览器。如果#loadingIc是可见的，那么在您的ajax调用期间它应该是可见的。您必须向我们展示更多的浏览器上下文，以了解其他可能会发生的事情。

另外，当你说“冻结”时，你究竟是什么意思？您是否看到任何浏览器UI的高CPU使用率和完全无响应？或者你只是没有看到#loadingIc用户界面？如果它是前者，那么你的ajax调用可能不是正确的异步。如果是后者，那么#loadingIc UI可能存在显示问题。

对Express服务器的Ajax调用冻结了UI

1 个答案: