Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Inline Web Worker Demo</title>
</head>
<body>
<h1 id="resultContainer"></h1>
<input type="number" id="number1" value="8" placeholder="Enter first number">
<input type="number" id="number2" value="10" placeholder="Enter second number">
<button id="multiplyButton">Multiply</button>
<script id="multiplyWorker" type="javascript/worker">
   self.addEventListener("message",function(event){
        var requestData = event.data,
            number1 = requestData.number1,
            number2 = requestData.number2,
            multiplyResult = number1 * number2;
        self.postMessage({result:multiplyResult});
    });
</script>
<script>
    var textContent = document.querySelector('#multiplyWorker').textContent,
            workerBlob = new Blob([textContent]),
            workerURL = window.URL.createObjectURL(workerBlob),
            multiplyWorker = new Worker(workerURL),
            resultContainer = document.getElementById("resultContainer"),
            multiplyButton = document.getElementById("multiplyButton"),
            number1 = document.getElementById("number1"),
            number2 = document.getElementById("number2");
    multiplyButton.addEventListener("click", function () {
        multiplyWorker.postMessage({
            number1:parseInt(number1.value,10),
            number2: parseInt(number2.value,10)
        });
    });
    multiplyWorker.addEventListener("message", function (workerEvent) {
        var responseData = workerEvent.data,
                result = responseData.result;
        resultContainer.innerText = "Result: " + result;
    });
</script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
saan1984pro
0viewers