为什么我在inp5.js中遇到无限循环错误？

Question

使用简单的for循环，我可以在p5.js web editor中触发潜在的无限循环异常

function setup() {
  var cnt = 0;
  var startTime = new Date().getTime();
  for (i = 0; i < 80000; i++) {
    console.log(cnt++);
  }
  var endTime = new Date().getTime();
  console.log("done in " + (endTime - startTime) + " milliseconds");
}

给我输出：

在第5行退出潜在的无限循环。要禁用循环保护：在501毫秒内为代码添加“// noprotect”

这并不奇怪，因为我发现p5.js-web-editor issues 174的阈值已增加到500毫秒

至少对我而言，令人惊讶的是，如果我删除任何分号，则在500ms之后未检测到潜在的无限循环并且我的循环完成。

例如：

function setup() {
  var cnt = 0 // no semicolon here..
  var startTime = new Date().getTime();
  for (i = 0; i < 80000; i++) {
    console.log(cnt++);
  }
  var endTime = new Date().getTime();
  console.log("done in " + (endTime - startTime) + " milliseconds");
}

给我输出：

79999

在1737毫秒完成

我的问题是，为什么删除分号会破坏p5.js网页编辑器的无限循环检测？

Answer 1

当p5.js web editor检测到正在运行的草图中可能存在无限循环时，它会抛出异常。

Web编辑器用于检测无限循环的逻辑非常简单，如果循环执行for more than 500ms则抛出异常。此异常可能会令人困惑，因为在使用此消息抛出异常时，循环可能几乎已准备好完成：

退出潜在的无限循环

潜在的词对于理解信息很重要。这行代码将触发异常：

while(true);

但任何执行时间超过500毫秒的有限循环也会触发该消息。

如果我们知道循环不是无限的，并且我们也知道可能需要超过500毫秒才能完成，我们可以添加一个noprotect注释来禁用无限循环保护：

var cnt = 0;
// noprotect
while(cnt < 80000)console.log(cnt++);

此代码将记录数字0到79999.在添加noprotect注释之前，请务必仔细查看代码。一个小错误可以将有限循环变成无限循环：

var cnt = 0;
// noprotect
while(cnt < 80000)console.log(cnt);

忘记增加cnt，我们创建了一个无限循环，p5.js网页编辑器无法检测到。此循环将一直运行，直到浏览器检测到它并提示用户停止或等待。

问题的最后一部分询问为什么在行的末尾删除分号会改变循环保护行为。简单的答案是编辑器必须添加仪器才能提供检测。缺少分号会导致编辑器无法正确检测代码。使用分号结束javascript语句是一种很好的做法。查看Do you recommend using semicolons after every statement in javascript的答案

摘要

• p5.j​​s Web编辑器可以帮助您避免长时间运行的循环
• 对有意长时间运行的循环使用noprotect注释
• 使用分号结束javascript语句