HTML/JavaScript：如何在运行其他代码时运行循环？答案

【问题标题】：HTML/JavaScript: How to run a loop while running other code?HTML/JavaScript：如何在运行其他代码时运行循环？
【发布时间】：2016-03-24 19:09:12
【问题描述】：

我希望代码可以每秒增加一个。但是，我也希望能够在它旁边运行其他代码。

例子：

while(true){
Number + 1 + OtherNumber = Number
}

而且还可以同时运行这个：

function onButtonPress() { 
OtherNumber++
}

注意：我不想每隔一段时间增加 otherNumber，而是在按下按钮时增加。

【问题讨论】：

标签： javascript html function loops while-loop

【解决方案1】：

你可以使用setInterval:

var intervalId = setInterval(function() {
    OtherNumber++;
}, 1000);

它将大约每秒增加一个OtherNumber。

setInterval返回区间ID，可用于停止：

clearInterval(intervalId);

演示 sn-p：

document.body.innerHTML += "Start<br/>";

setInterval(function() {
  document.body.innerHTML += "Interval step<br/>";
}, 1000);

document.body.innerHTML += "Look! Code is completed before interval step<br/>";

【讨论】：

setInterval 在无限循环时不起作用。 'while(true){}` 将阻止包括 setInterval 在内的所有事件，这将简单地将调用推入调用堆栈直到溢出。
@Blindman67 当然。 setInterval 本身就是一个无限循环，它应该替换 while 的使用而不会导致性能问题。
如果我按照自己的方式行事，setInterval 将从 Javascript 标准中完全删除，因为它没有对 setTimeout 提供额外的改进，但具有推入调用堆栈而不考虑的可怕特性代码为它生成的事件提供服务的能力。它被广泛误解，几乎总是被滥用。
这不是我想要的。我正在寻找一种能够在按下按钮时增加 otherNumber 的方法，而不是在特定的时间间隔内。

【解决方案2】：

如果您想将代码作为两个单独的线程运行，则必须使用 web Worker，因为 Javascript 是单线程的，一次不能运行多个函数。

如果你创建一个函数

function workForever(){
    while(true){
       .. do work
    }
}

您将完全阻止所有代码，不会调用任何事件，也不会执行其他 javascript。大多数浏览器会弹出一个对话框，报告某个功能需要很长时间，您是否要终止该页面。但是你的代码卡在那个循环中，只能从循环本身中退出。

WebWorkers 是 Javascript 环境中多任务处理的一个很好的解决方案，但是您仍然需要提供一些非执行时间来让 webworkers 进行通信。 while(true) 将阻止与工作人员的所有通信，实际上使他们无用。

SetInterval、setTimeout、requestAnimationFrame 也将被屏蔽。不幸的是，Javascript 是单线程的，永远无法同时运行两个函数。

【讨论】：

这正是我需要的，谢谢你的帮助。