浏览器端异步超时检测

在写JavaScript代码的时候，异步回调是一个很是常见的特征。完善的回调会有和超时相关的设置，例如Ajax的timeout选项。那若是SDK提供的异步调用函数中没有提供超时设置，在出现异常的时候就只能干等了吗？这固然是不能忍的。
app

咱们先构造一个没有提供超时设置的回调函数：异步

function myTimeout(options) {
  options = options || {};
  setTimeout(function () {
    options.callback("called!");
  }, 5000);
}

上面的代码很简单，5秒后回调送进去的回调函数。若是咱们要为这个异步回调提供超时设置，例如3秒钟超时，那么该怎么弄呢？函数

(function () {

var oldMyTimeout = myTimeout;
myTimeout = function (options) {
  var timeoutFlag = false;
  var timeoutHandle = -1;
  var timeout = options.timeout;
  var callback = options.callback;
  var hookCallback = function () {
    if(timeoutFlag == true) return;        // 检测到超时，再也不执行后面的实际回调函数
    clearTimeout(timeoutHandle);           // 清空超时控制器
    return callback.apply(this, Array.prototype.slice.call(arguments));  //调用原始的回调函数
  }
  options.callback = hookCallback;
  
  if(timeout > 0) {  // 超时设置小于0时，不进行超时检测
    timeoutHandle = setTimeout(function() {
      timeoutFlag = true;
      callback("已经超时(" + timeout + "ms)");
    }, timeout);
  }
  oldMyTimeout(options);
}

})();

能够用下面代码进行测试：测试

// called!
myTimeout({
  callback: function (data) {console.log(data);},
  timeout: 6000
});

// 已经超时(4000ms)
myTimeout({
  callback: function (data) {console.log(data);},
  timeout: 4000
});