Question

找出特定$.ajax()请求需要多长时间的好方法是什么？

我想获取此信息，然后将其显示在某个页面上。

ANSWER ?? ::::

我是javascript的新手，如果你不想内联“成功”功能（因为它将是一个更大的功能），这是我能想到的最好的。这是一个很好的方法做这个？我觉得我过于复杂化了......：

makeRequest = function(){
    // Set start time
    var start_time = new Date().getTime();

    $.ajax({ 
        async : true,
        success : getRquestSuccessFunction(start_time),
    });
}

getRquestSuccessFunction = function(start_time){
    return function(data, textStatus, request){
        var request_time = new Date().getTime() - start_time;
    }
}

Answer 1

@codemeit是对的。他的解决方案看起来类似于以下使用jQuery的ajax请求。这将返回请求时间（以毫秒为单位）。

var start_time = new Date().getTime();

jQuery.get('your-url', data, function(data, status, xhr) {
        var request_time = new Date().getTime() - start_time;
});

Answer 2

这是正确的方法。

$.ajax({
    url: 'http://google.com',
    method: 'GET',
    start_time: new Date().getTime(),
    complete: function(data) {
        alert('This request took '+(new Date().getTime() - this.start_time)+' ms');
    }
});

https://jsfiddle.net/0fh1cfnv/1/

Answer 3

由于javascript使用event queue，因此无法提供准确的时间安排。这意味着你的程序可以像这样执行：

启动AJAX请求
同时处理等待鼠标点击事件/任何其他等待代码行
开始处理AJAX就绪响应

不幸的是，就我所知，没有办法把事件添加到队列中。 Event.timeStamp返回事件从队列中弹出的时间，请参阅此小提琴：http://jsfiddle.net/mSg55/。

HTML：

<a href="#">link</a>
<div></div>

使用Javascript：

$(function() {
    var startTime = new Date();
    $('a').click(function(e) {
        var endTime = new Date(e.timeStamp);
        $('div').append((endTime - startTime) + " ");
        //produce some heavy load to block other waiting events
        var q = Math.PI;
        for(var j=0; j<1000000; j++)
        {
            q *= Math.acos(j);
        }
    });

    //fire some events 'simultaneously'
    for(var i=0; i<10; i++) {
        $('a').click();
    }
});

Answer 4

亚里士多德对事件队列是正确的。您可以做的是将时间戳创建放入一段代码中，您知道这些代码将尽可能接近AJAX请求的开头执行。

当前稳定版本的jQuery（在撰写本文时为2.2.2）有一个beforeSend键，它接受一个函数。我会在那里做。

请注意，在JavaScript中，程序启动后，所有声明为在函数外部的全局范围变量都会被初始化。了解JavaScript范围将有助于此。

棘手的部分是访问您在beforeSend回调中的success函数中声明的变量。如果您在本地声明（使用let），则无法在该功能的范围之外轻松访问它。

这是一个示例，它会给出稍微更精确的结果（警告：在大多数情况下！），这也是危险，因为它声明了一个全局范围的变量（{{ 1}}）可能与同一页面上的其他脚本交互不良等。

我很想深入了解JavaScript原型bind功能的世界，但它有点超出了范围。这是一个替代答案，谨慎使用，并在生产之外。

start_time

Answer 5

您可以将开始时间设置为var并计算AJAX操作完成时的时差。

您可以使用Firefox插件Firebug来检查AJAX请求和响应的性能。 http://getfirebug.com/或者您可以利用Charles代理或Fiddler来嗅探流量以查看效果等。

Answer 6

makeRequest = function(){

    // Set start time
    console.time('makeRequest');

    $.ajax({ 
        async : true,
        success : getRquestSuccessFunction(start_time),
    });
}

getRquestSuccessFunction = function(start_time){

    console.timeEnd('makeRequest');

    return function(data, textStatus, request) {

    }
}

这以毫秒为单位给出输出像makeRequest：1355.4951171875ms

Answer 7

如何处理：

首先用请求对象全局设置属性TimeStarted。

$(document).ajaxSend(function (event, jqxhr, settings) {
    jqxhr.TimeStarted = new Date();
});

然后调用任何ajax

var request = $.ajax({ 
    async : true,
    success : function(){
    alert(request.TimeStarted);
   },
});

Answer 8

我摆弄了一下，得到了一个通用函数，可以显示所有ajax调用。这意味着您不必为每个ajax调用都做相同的事情

var start_time;   
$.ajaxSetup({
  beforeSend: function () {
    start_time = new Date().getTime();
  },
  complete: function () {
    var request_time = new Date().getTime() - start_time;
    console.log("ajax call duration: " + request_time);
  }
});

Answer 9

您可以使用下面的代码Spinet .....

var d1 = new Date();  
$.ajax({
    type: 'GET',
    contentType: "application/json; charset=utf-8",
    url: '/Survey/GET_GetTransactionTypeList',
    data: {},
    dataType: 'json',
    async: false,
    success: function (result) {
        var d2 = new Date();
        var seconds = (d2 - d1) / 1000;
        console.log(seconds);           
    },
    error: function (request, status, error) {
        alert(request.statusText + "/" + request.statusText + "/" + error);
    }
});

如果要减少Ajax调用初始化持续时间，只需将async值设置为false而不是true。像这样...

async: false,

了解Ajax请求需要多长时间才能完成

9 个答案: