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做同样的事情？

更新

我需要在ajax请求之前初始化start，但在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()选项{1}}方法。

测量ajax接收时间

1 个答案: