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

Question

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

jqueryjsonajax

4

我这里有一个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);
    },
});

- Hard Spocker

3

可以分块发送大文件吗？这样你就可以处理它，并在完成一个块时更新百分比。 - Cacho Santa

相关：https://dev59.com/fnE95IYBdhLWcg3wDpqg - Thilo

@cacho 是的，但我认为这会使处理时间变慢，因为我需要将大数据拆分成分区。如果这就是你的意思。 - Hard Spocker

2个回答

3

您要寻找的技术被称为时间机器。它并不存在。;)

与此同时，您可以这样做：

1. 使用开发者工具对典型用例进行分析。多次执行此操作并收集数据。平均值或使用最长的非异常值来获得最佳估计。 2. 将进度设置为在“球场”时间内动画化到...例如...90％。 3. 当请求最终完成时，在成功回调中将其动画化到100％。

- Greg Pettit

我发现这是一个不错的解决方案，但并不是最好的，因为它不能显示精确的加载时间。我的问题是否与在Windows传输文件时的加载时间有关？他们是如何做到的？ - Hard Spocker

1

你所忽略的是它不可能是精确的。我不确定你是否意识到你正在要求一个预测未来的过程。你能期望的最好结果是一个合理的估计。文件传输也是如此，但同样不完美。你可以建立一个平均速率，知道文件的大小，因此你可以合理地预测何时会到达。但它也不是完全精确的；由于条件的变化，它在传输过程中不断重新计算。 - Greg Pettit

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Konrad Tallman · Accepted Answer

$.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. 当请求完成时，将实际情况的平均值更新到数据库中。

随着时间的推移，这个方法应该会越来越准确。

祝你好运！