JS 死循环的手动终止以及代码熔断方法

栏目: JavaScript · 发布时间: 5年前

内容简介:最近工作中遇到了一些死循环导致的页面卡死问题,经过 trouble shooting 和代码修复解决了问题,在此也顺便整理了一下 JS 死循环的手动终止以及代码熔断方法。你是否遇到这样的场景,在你执行了页面上某个动作后,一些怪异的事情发生了:那么这时候很有可能,你的 JS 代码里出现了死循环(Infinite Loop)。

最近工作中遇到了一些死循环导致的页面卡死问题,经过 trouble shooting 和代码修复解决了问题,在此也顺便整理了一下 JS 死循环的手动终止以及代码熔断方法。

被死循环卡死的页面

你是否遇到这样的场景,在你执行了页面上某个动作后,一些怪异的事情发生了:

  • 页面卡死了,点击页面上任何按钮,或者是尝试滚动页面都没有任何反应。
  • 过了几秒后,电脑的风扇开始加速转动,声音变大。
  • 然后,你尝试关闭页面,发现连页面都关不了(刚卡死不太久时候其实还能关闭)。
  • 接着,你尝试关闭浏览器,但也没有任何反应。随着风扇转动地更快,你也开始焦急了。
  • 无奈,你打开任务管理器关闭了浏览器的进程。
  • 当你想再试试触发这一切的那个“动作”时候,上述事情还是如期而至。
  • ……
    JS 死循环的手动终止以及代码熔断方法

那么这时候很有可能,你的 JS 代码里出现了死循环(Infinite Loop)。

死循环出现的原因很多:

  • 组件更新回调里再次调用了更新方法。
  • 表单项 A 和 B 相互联动。
  • 递归函数里忘记写了终止逻辑,或是终止逻辑有问题。
  • ……

死循环严重影响用户体验,甚至伤机器,我们要尽力避免,但完全规避是不可能的,毕竟 程序员 也是人,也会犯错。所以,今天我们要介绍如何手动终止死循环,以及如何用代码熔断死循环。

手动终止死循环

如果你尝试调用任务管理器,关闭浏览器进程,这样的操作成本较高,你还要重新打开浏览器,打开页面。但是不这么做,页面就会卡死,你“什么也做不了”。其实,在 Chrome 67及以上版本中,还是有方法可以在不杀死浏览器进程的前提下终止死循环的。方法如下:

  • 打开开发者工具 DevTools(F12)。
  • 点开 Sources 面板,点击 “Pause script execution” 按钮,发现代码就暂停了。
  • 然后长按“Pause script execution” 按钮,并选择 “Stop” 图标,就终止死循环了。

JS 死循环的手动终止以及代码熔断方法

代码熔断

手动终止只是减少杀死浏览器进程重启的成本,我们最好还能用代码来熔断一些死循环。下面是熔断函数:

var loopBreaker = (function() {
  var count = 0;
  var startTime;
  return function() {
    startTime || (startTime = Date.now());
    count += 1;
    if (count > 10000 && (Date.now() - startTime > 1000)) {
      throw new Error("Loop Broken!");
    }
  };
}());

使用方法:

for (var i = 0; i < 1000000; i--) {
  loopBreaker();
  console.log(i);
}

还可以改写这个函数以支持更多的功能,如:日志格式、熔断阈值等。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数学世纪

数学世纪

皮耶尔乔治·奥迪弗雷迪 / 胡作玄、胡俊美、于金青 / 上海科学技术出版社 / 2012-1 / 28.00元

《数学世纪:过去100年间30个重大问题》以简短可读的方式论述了整个20世纪的数学。20世纪的数学博大精深,新兴领域及学科的建立发展,许多经典问题得到解决,大量新的有意义的问题的引入,为数学带来了活力。《数学世纪:过去100年间30个重大问题》介绍了数学基础,20世纪的纯粹数学、应用和计算数学,以及目前未解的重要问题,中间穿插了希尔伯特的23个问题的解决情况、菲尔兹奖和沃尔夫奖得主的工作成就等。一起来看看 《数学世纪》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

html转js在线工具
html转js在线工具

html转js在线工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具