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

Question

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

我想获取此信息,然后在某个页面上显示它.

回答？？::::

我是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使用事件队列,因此无法提供准确的计时.这意味着您的程序可能会执行如下操作:

• 启动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)声明它,则无法在该函数范围之外轻松访问它.

下面是这将给稍微更准确的结果为例(警告:在大多数情况下),这也是危险的,因为它宣布全球范围变量(start_time),它可以在同一页面等与其他脚本严重相互作用

我想深入了解JavaScript的原型绑定函数的世界,但它有点超出范围.这是一个替代答案,谨慎使用,并在生产之外.

'use strict';
$.ajax({
    url: url,
    method: 'GET',
    beforeSend: function (request, settings) {
        start_time = new Date().getTime();
    },
    success: function (response) {
        let request_time = new Date().getTime() - start_time;
        console.log(request_time);
    },
    error: function (jqXHR) {
        console.log('ERROR! \n %s', JSON.stringify(jqXHR));
    }
]);