Web Worker arbeitet nicht mit onclick

Question

Ich versuche, das Verhalten von Web Workers zu erarbeiten, und ich bin ein wenig ratlos, warum die Ausgabe nur zeigt und behält die Nachricht, wenn die Funktion dem window.onload -Ereignis zugeordnet ist und auch Warum zeigt das Hinzufügen eines Alerts() am Ende der Funktion vorübergehend die Nachricht an, bevor Sie auf "OK" klicken und die Nachricht verschwindet.

Schätzen Sie jede Hilfe, danke.

<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

Ihre Arbeiter die Antwort sendet, bevor Sie selbst die auf Nachricht Rückruf gesetzt. Also, wenn Sie worker.onmessage = ... tun, ist die "Hello to you too" Nachricht bereits weg.

Immer zuerst Rückrufe zuweisen, dies gilt auch für onload Rückrufe auf XHR-Anfragen und Bilder. Machen Sie es wie folgt aus:

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

Auch ich bin nicht sicher, warum Sie Formular verwenden, wenn es ein Javascript-Programm ist und Sie nicht wollen, etwas zu Server senden ... nur verwenden <div>:

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

Wenn Sie <button> in <form> haben, sendet es das Formular und lädt die Seite neu, wenn Sie darauf klicken - es sei denn, es ist <button type="button">.