javascript - 测量ajax接收时间

Question

我正在尝试测量下载/上传速度并同时发出大量 ajax 请求。其中一些由于浏览器连接限制而被阻止，因此我无法通过执行以下操作来确定实际下载时间:

var start = new Date;
$.get('/data').done(function () {
    console.log(new Date - start);
});

因此，我以这种方式使用原始 xhr:

var open, start, end;
var req = new XMLHttpRequest();
req.open('GET', '/data', true);
req.onreadystatechange = function () {
    switch (this.readyState) {
        case 2:
        case 3:
            if (!start) { start = new Date(); }
            break;
        case 4:
            if (!end) { end = new Date(); }
            console.log('%d: pending = %d, download = %d, total = %d', i, start - open, end - start, end - open);
            break;
    }
};
if (!open) { open = new Date(); }
req.send();

有什么方法可以使用 jQuery 做同样的事情吗？

更新

我需要初始化 start 不是在 ajax 请求之前，而是在 requestState 更改为 2 或 3(实际上是下载/上传)之后。

更新 #2

jQuery bugtracker 中存在相关问题:http://bugs.jquery.com/ticket/9883

Answer 1

$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
    if ( options.onreadystatechange ) {
        var xhrFactory = options.xhr;
        options.xhr = function() {
            var xhr = xhrFactory.apply( this, arguments );
            function handler() {
                options.onreadystatechange( xhr, jqXHR );
            }
            if ( xhr.addEventListener ) {
                xhr.addEventListener( "readystatechange", handler, false );
            } else {
                setTimeout( function() {
                    var internal = xhr.onreadystatechange;
                    if ( internal ) {
                        xhr.onreadystatechange = function() {
                            handler();
                            internal.apply( this, arguments ); 
                        };
                    }
                }, 0 );
            }
            return xhr;
        };
    }
});    

var start = null;
var xhr = $.ajax({
   url: "/data",
   complete: function() {
      var end = new Date().getTime();
      var requestTime = end - start;
      console.log(requestTime);
   }
   onreadystatechange: function(xhr) {
      if(xhr.readyState == 3 && start == null) {
         start = new Date().getTime();
      }
   }
});

使用 jQuery.ajax()方法 complete 回调在 success 或 error 时触发(在这些回调之后...如果您想使用这些回调，请使用单独的回调)。

更新(查看您的评论): 使用来自此处的代码:https://gist.github.com/chrishow/3023092利用 .ajaxPrefilter() 方法，我们可以将 onreadystatechange 选项添加到 .ajax() 方法。