Web Worker 不使用 onclick [重复]答案

【问题标题】：Web worker not working with onclick [duplicate]Web Worker 不使用 onclick [重复]
【发布时间】：2016-04-25 20:22:15
【问题描述】：

我正在尝试解决 Web Worker 的行为，但对于为什么输出仅在将函数分配给 window.onload 事件时才显示并保留消息以及为什么添加 alert()到函数的末尾会在单击“确定”之前暂时显示消息并且消息消失。

感谢任何帮助，谢谢。

<form>
    <button id="button" style="height:30px;">Say hello</button>
    <input id="output" style="width:200px"></input>
 </form>
 <script>
    var button = document.getElementById("button");
    button.onclick = function(){

      var worker = new Worker("worker.js");
      worker.postMessage("hello");

      worker.onmessage = function(event){
        var message = event.data;
        var output = document.getElementById("output");
        output.value = "Worker says " + message;
      }

      //alert("Message shows when this alert is here, but as "
      //       + "soon as you click ok...");

    }  
 </script>

worker.js

onmessage = function(){
  postMessage("Well hello to you too.");
}

【问题讨论】：

如果将type="button" 添加到<button> 元素，worker 是否工作？
订阅后发送消息；我猜此时工人的胆量非常快......
是的，type=button 已经修复了，这是为什么呢？还有 dandavis，您是否建议我将 worker.postMessage 放在 worker.onmessage 之后，或者这不会有太大区别吗？感谢您的修复，非常感谢您提供有关此行为的任何其他信息。
如果您不打算提交<form>，请继续使用type="button"。

标签： javascript html web-worker

【解决方案1】：

您的工作人员在您设置消息回调之前发送回复。因此，当您执行worker.onmessage = ... 时，"Hello to you too" 消息已经消失。

始终首先分配回调，这也适用于 XHR 请求和图像上的 onload 回调。这样做：

  var worker = new Worker("worker.js");  

  worker.onmessage = function(event){
    var message = event.data;
    var output = document.getElementById("output");
    output.value += "Worker says " + message + "\n";
  }

  worker.postMessage("hello");

我也不确定你为什么使用表单，因为它是一个 javascript 程序并且你不想向服务器发送任何东西......只需使用<div>：

<div>
    <button id="button" style="height:30px;">Say hello</button>
    <input id="output" style="width:200px"></input>
</div>

如果您在 <form> 中有 <button>，它会在您单击它时发送表单并重新加载页面 - 除非它是 <button type="button">。

【讨论】：