挣脱浏览器的束缚（5） - 哭笑不得的IE Bug

挣脱浏览器的束缚（5） - 哭笑不得的IE Bug2010-07-26赵劼还记得《ASP.NET AJAX Under the Hood Secrets》吗？这是我在自己的Blog上推荐过的唯一一篇文章（不过更可能是一时兴起）。在这片文章里，Omar Al Zabir提出了他在使用ASP.NET AJAX中的一些经验。其中提到的一点就是：Browsers do not respond when more than two calls are in queue。简单的说，就是在IE中，如果同时建立了超过2两个连接在“连接状态”中，但是没有连接成功（连接成功之后就没有问题了，即使在传输数据），浏览器会停止对其他操作的响应，例如点击超级链接进行页面跳转，直到除了正在尝试的两个连接就没有其他连接时，浏览器才会重新响应用户操作。

出现这个问题一般需要3个条件：

同时建立太多连接，例如一个门户上有许多个模块，它们在同时请求服务器端数据。

响应比较慢，从浏览器发起连接，到服务器端响应连接，所花的时间比较长。

使用IE浏览器，无论IE6还是IE7都会这个问题，而FireFox则一切正常。

在IE7里居然还有这个bug，真是令人哭笑不得。但是我们必须解决这个问题，不是吗？

编写代码来维护一个队列

与《ASP.NET AJAX Under the Hood Secrets》一文中一样，最容易想到的解决方案就是编写代码来维护一个队列。这个队列非常容易编写，代码如下：

RequestQueue.js

if （！window.Global）
{
  window.Global = new Object（）;
}
Global._RequestQueue = function（）
{
  this._requestDelegateQueue = new Array（）;

  this._requestInProgress = 0;

  this._maxConcurrentRequest = 2;
}
Global._RequestQueue.prototype =
{
  enqueueRequestDelegate : function（requestDelegate）
  {
    this._requestDelegateQueue.push（requestDelegate）;
    this._request（）;
  },

  next : function（）
  {
    this._requestInProgress --;
    this._request（）;
  },

  _request : function（）
  {
    if （this._requestDelegateQueue.length <= 0） return;
    if （this._requestInProgress >= this._maxConcurrentRequest） return;

    this._requestInProgress ++;
    var requestDelegate = this._requestDelegateQueue.shift（）;
    requestDelegate.call（null）;
  }
}
Global.RequestQueue = new Global._RequestQueue（）;