Question

我这里有一个AJAX请求，有时可以处理一个非常大的json对象。我想显示一个看起来像这样的加载面板（45％）：

我的问题是我似乎无法衡量服务器处理从AJAX发送的json对象的时间。

这是我的AJAX请求：

$.ajax({
    url: './home/sumbit_json',
    type: 'POST',
    data: { 
      json_data: json_data, 
      user: user,
      entry: entry
    },
    dataType: 'json',
    success: function(data) {
      if (data.status == false) {
        alert("transaction failed");
      } else {
        alert("transaction successful");
      }

    }, // End of success function of ajax form
    error: function(xhr, status, errorThrown) {
      console.log("Error: " + errorThrown);
      console.log("Status: " + status);
      console.dir(xhr);
    },
});

Answer 1

$.ajax({
    url: './home/sumbit_json',
    type: 'POST',
                // this will run before the request to server
    beforeSend: function(){
        // this variable may need to be set outside of ajax request
        // just use something to track time
        time = new Date();
    },
    data: { 
        json_data: json_data, 
        user: user,
        entry: entry
    },
    dataType: 'json',
    success: function(data) {
    if (data.status == false) {
        alert("transaction failed");
    } else {
        alert("transaction successful");
        //figure out how long it took:)
        alert(new Date() - time);
    }

    }, // End of success function of ajax form
    error: function(xhr, status, errorThrown) {
        console.log("Error: " + errorThrown);
        console.log("Status: " + status);
       console.dir(xhr);
    },
});

也许那时你可以开始发送关于服务器进入数据库需要多长时间的数据。开始跟踪进程的平均值，然后在开始请求之前将进度条设置为完成服务器上数据库中存储的平均值。当然如果它完成了，只需将进度条加速到最后。

您可以通过使用Chrome中的不同限制设置多次测试来扩展此预测。然后为数据库中的速度范围创建平均值。

所以工作流程： 1.以互联网速度X计算请求的长度。 2.把时间放在数据库中 3.按时间做另一个请求 4.使用数据库中的值计算平均值并更新数据库值 5.在不同的互联网速度/延迟上重复1-4次 6.现在您已经了解了平均执行时间，发送请求以获取数据库中用户当前速度/延迟到服务器的平均时间 7.设置进度条以在步骤6中找到的平均时间内完成。 8.请求完成后，将数据库中的平均值更新为此实际方案。

随着时间的推移，应该越来越准确。

祝你好运！

Answer 2

您正在寻找的技术称为时间机器。它不存在。 ;）

与此同时，你可以做的是：

使用Developer工具描述典型用例。这样做几次并收集数据。将其平均或使用最长的非离群值来获得最好的球场。
将进度设置为动画为...比如说...＃90;超过＃34; ballpark＆＃34;时间。
当请求最终完成时，将其设置为100％，作为成功回调的一部分。

如何测量AJAX请求的加载时间并显示加载面板？

2 个答案: