浏览器端异步超时检测

2019独角兽企业重金招聘Python工程师标准>>>

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

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

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
});

转载于:https://my.oschina.net/u/1454562/blog/279457