Question

我试图弄清楚Web Workers的行为，并且我很难理解为什么输出仅在将函数分配给window.onload事件时显示并保留消息，以及添加警报的原因（）在功能结束时，在点击“确定”之前会立即显示消息。消息消失了。

感谢任何帮助，谢谢。

<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.");
}

Answer 1

在您设置on message message callback之前，您的工作人员会发送回复。因此，当您执行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>

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

Web工作者不使用onclick

1 个答案: