如何检测和停止用户提供的 JavaScript 代码中的无限循环？答案

【问题标题】：How to detect and stop an infinite loop in user-provided JavaScript code?如何检测和停止用户提供的 JavaScript 代码中的无限循环？
【发布时间】：2017-05-13 01:16:20
【问题描述】：

我正在为游戏编写浏览器内代码编辑器。编辑器将允许用户编写自己的 JavaScript 文件，然后将其加载到运行编辑器的同一个 DOM 中。这将允许他们在代码旁边的画布元素中查看游戏，并在每次保存时更新它。

编辑器是针对刚接触JavaSript的人，很容易不小心陷入死循环。如果可能的话，我想设置我的编辑器，这样如果循环执行太多次或太快，循环就会中断并弹出一条消息，提醒用户他们有一个无限循环。

这对于新人来说是理想的，因为如果整个编辑器突然崩溃，他们可能没有意识到自己的错误是什么，并认为这是我的编辑器的问题。

如何在我的编辑器中实现自动停止无限循环的故障保护？

【问题讨论】：

@user2182349 编辑器将允许用户编写自己的 javascript 文件，然后将其加载到运行编辑器的同一个 DOM 中。这将允许他们在代码旁边的画布元素中查看游戏，并在每次保存时更新它。
Here's what CodePen does 停止无限循环。它预编译 JavaScript 以在所有循环和函数中插入监控函数。
@4castle 太完美了，这正是我想要的。非常感谢。这是我在这里的第一个问题，所以我不能 100% 确定它是如何工作的，但是如果您将此作为答案添加，我会将其标记为已解决！谢谢！
您不必将代码放在同一个 DOM 中。事实上，我不建议这样做，因为您会与名称等发生冲突。如果用户键入window.document = null，您的编辑器将停止工作。使用 blob 非常容易。 someIFrame.src = URL.createObjectURL(new Blob([html], {type: 'text/html'}));
@4castle，发表您的评论作为答案并链接到该文章很好。它也可能对寻找答案的其他人更有帮助。

标签： javascript editor infinite-loop

【解决方案1】：

处理用户提交的代码中潜在的无限循环的最佳方法是预编译代码以在代码中插入监控功能。这称为instrumenting，是explained in detail by Codepen。

例如，来自用户的以下代码...：

for (var i = 0;; i++) {
  console.log("hello for loop.");
}

console.log("We'll never reach this line of code");

...会像这样被检测：

for (var i = 0;; i++) {
    if (window.CP.shouldStopExecution(1)) {
        break;
    }
    console.log('hello for loop.');
}

console.log('finished because we broke out of the loop');

【讨论】：