浏览器端异步超时检测
浏览器端异步超时检测
GZShi_alpha 发表于4年前
浏览器端异步超时检测
  • 发表于 4年前
  • 阅读 254
  • 收藏 8
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

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


共有 人打赏支持
GZShi_alpha
粉丝 5
博文 5
码字总数 2709
×
GZShi_alpha
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: