Javascript 进程冻结 HTML 输入元素

Posted 2023-03-05

【中文标题】Javascript 进程冻结 HTML 输入元素

【英文标题】：Javascript process freezes HTML input elements

【发布时间】：2015-09-04 03:52:57

【问题描述】：

我有一些按钮和输入字段。其中一个按钮启用了一个旨在永久运行的 javascript 进程，并且只能通过单击另一个按钮才能终止。

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

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

【问题讨论】：

你能展示你的代码吗？

是第一个做dom更新的代码吗？您是否创建了一个 inf 循环或点击了 ***？您的开发工具中有任何错误吗？代码示例和 jsfiddle？

【参考方案1】：

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

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

【参考方案2】：

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

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

function myFunction() 
  //Your code

【参考方案3】：

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

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

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

从 HTML5 开始，您可以使用类似于线程的网络工作者。这个概念是新的，因此即使在主要浏览器中也只能提供有限的支持。只需在 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

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