Test worker message order

by Darker

HTML

<div id="output"></div>

CSS

#output {
  font-family: "Courier new";
  white-space: pre;
}

JavaScript

function workerFN() {
     self.onmessage = function(e) {
         e = e.data;
         if(e.name == "LOOP") {
             self.postMessage({name:"STARTED", sourceId:e.id});
             var i=0;
             for(; i<e.max; i++);
             self.postMessage({name:"DONE", sourceId:e.id, finalValue: i});
         }     
     }
     self.postMessage({name:"INIT"});
}
var url = "/echo/js/?js="+encodeURIComponent("("+workerFN.toString()+")()");
var worker = new Worker(url);
var output = document.getElementById("output");


worker.addEventListener("message", function(e) {
   e = e.data;
   var messages = [];
   if(e.name == "DONE") {
      messages.push("Loop #"+e.sourceId+" done.");
   } else if(e.name == "STARTED") {
      messages.push("Loop #"+e.sourceId+" started.");
   } else if(e.name == "INIT") {
      worker.postMessage({name:"LOOP", id: 1, max:1000000000});
      messages.push("Loop #1 requested for execution.");
      worker.postMessage({name:"LOOP", id: 2, max:1000000000});
      messages.push("Loop #2 requested for execution.");
      worker.postMessage({name:"LOOP", id: 3, max:1000000000});
      messages.push("Loop #3 requested for execution.");
      worker.postMessage({name:"LOOP", id: 4, max:1000000000});
      messages.push("Loop #4 requested for execution.");
   }
   console.log.apply(console, messages);
   output.appendChild(new Text(messages.join("\n")+"\n"));
})