Javascript 进程冻结 HTML 个输入元素

Question

我有一些按钮和输入框。其中一个按钮启用了一个 javascript 进程，该进程旨在永远运行并且除非单击另一个按钮才能终止。

但是，一旦进程启动，所有HTML元素都被冻结，因此无法终止进程。

如果相关的话，我正在运行Opera。

Answer 1

这并不让我吃惊。 JavaScript 在 UI 线程上运行。在每个事件处理程序或函数上，旨在快速更改任何相关 DOM 状态信息，启动任何异步进程，然后尽快完成。因此，没有其他任何东西可以响应任何其他事件。

听起来你的无限进程可能会更好地作为 "Web Worker"（一种允许实际多线程的稍微更新的技术），或者如果它不断地检查文档的状态，也许将它安排在一个重复的系列上超时。

Answer 2

可能是因为当 js 运行时，页面正在等待它完成。你应该执行它 "asynchronously"。尝试将其包装在 setInterval 中，例如：

setInterval(function() {
    myFunction();    
}, 100);

function myFunction() {
  //Your code
}

Answer 3

所有 html 元素冻结的原因是单击按钮后触发的永无止境的代码。您应该将永无止境的代码更改为异步代码，这样它就不会影响浏览器。

JavaScript 在 HTML5 之前不支持线程，但是可以使用方法 setTimeout 和 setInterval 异步执行代码。对于您的情况，请使用 setTimeout 方法。

有关使用它的更多信息，请参阅 setTimeout。

从HTML5开始，可以使用类似于线程的web worker。这个概念是新的，所以即使在主流浏览器中也只能提供有限的支持。只需在 google 中输入 "Html5 web worker" 你就会得到很多关于这个的教程。

检查此 Link 以了解支持网络工作者的浏览器

如果你使用setTimeout，我不能保证你的浏览器不会挂起，因为所有的代码都是在同一个线程中执行的。另一方面，网络工作者在单独的线程上运行。此外，如果您使用 web worker，您的 javascript 代码应该存在于单独的文件中。

您还可以使用以下代码检查您的浏览器是否支持 web worker

if(Worker){
    //Browser supports worker
    //Your code
}
else{
    //Web worker is not supported in this browser
}

如果您选择使用 web worker，请在单击按钮期间启动一个 worker，并确保该 worker 仅创建一次。有一些限制，例如您不能在工作线程中更新 DOM。如果您需要打破这些限制，请使用 worker 的 postMessage 方法与浏览器主线程进行通信。

Javascript process freezes HTML input elements