ウェブワーカーがonclickと連携していない

Question

私はWebワーカーの動作を試していますが、なぜ出力がwindow.onloadイベントに割り当てられたときにメッセージが表示され、保持されるのかがちょっとわかりませんなぜ関数の最後にalert（）を追加するとメッセージが一時的に表示され、「OK」をクリックしてメッセージが消えてしまうのでしょうか。

ありがとうございました。

<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

あなたの労働者はあなたもメッセージ・コールバックに設定する前に応答を送信します。したがって、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"); 

また、私はちょうど<div>を使用して...それは、JavaScriptプログラムだとサーバーに何かを送信したくない場合に、なぜあなたはフォームを使用していることを確認していない：

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

このようにそれを行います

を除き、<button>が<form>にある場合は、フォームを送信し、クリックするとページをリロードします。