JSFiddle - React, Tailwind, and code Playground

by Spencer Evans

HTML

<!-- Load Thread.js library -->
<script src="http://spencer-evans.com/share/github/threadjs/fiddle/thread.js"></script>

<!-- Add a page header -->
<h1 style="margin-bottom: 5px;">Thread.js - Prime Numbers Example</h1>
<p id="unsupported" style="display: none; background-color: rgba(255,180, 180,1); padding: 10px; border-radius: 6px;">Your browser does not support javascript workers or threadjs.</p>
<p id="error" style="display: none; background-color: rgba(255,180, 180,1); padding: 10px; border-radius: 6px;">ERROR: While Thread.js supports IE10, this example will only work on IE11 or newer. This is because the thread.js library is being loaded from an external domain, which is unsupported in IE10.</p>

<div id="container">
    <p style="margin-left: 10px; margin-right: 20px; margin-bottom: 20px; color: rgba(0,0,0,0.75);">
        This is a <a href="https://github.com/swevans/thread.js">Thread.js multi-threaded javascript</a> example. You can find more information out about the library <a href="https://github.com/swevans/thread.js">here</a>.<br/>
        <br/>
        This example uses a thread.js background thread to count the prime numbers between 0 and 500,000 (a time consuming task!). The spinning blue square demonstrates that the thread is not slowing down the webpage, despite running heavy calculations continuously.</p>
    
    <div id="loading">
        <div id="spinner" class="box spinner" style="float: left;"></div>
        <p id="status">Processing...<p>
    </div>

    <!-- Set up a place for output -->
    <strong>Output:</strong>
    <div id="output" style="padding-left: 20px;"></div>
</div>

CSS

.box {
    margin: 0px;
    margin-right: 10px;
    margin-left: 10px;
    width: 15px;
    height: 15px;
    background: rgba(180, 180, 255,1);
    border-radius: 20%;
}
.spinner {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

JavaScript

// Code to run in the thread
function findPrimes(max) {
    function isPrime(value) {
        for(var i = 2; i < value; i++) {
            if(value % i === 0) {
                return false;
            }
        }
        return value > 1;
    }

    var findPrimeInfo = { count: 0, pctComplete: 0 };
    for (var i = 0; i < max; ++i) {
        if (isPrime(i)) {
            findPrimeInfo.count++;
            findPrimeInfo.pctComplete = i / max;
            Thread.parent.postEvent("foundPrime", findPrimeInfo);
        }
    }
    
    // Dispatch one final to note 100% complete
    findPrimeInfo.pctComplete = 1;
    Thread.parent.postEvent("foundPrime", findPrimeInfo);
    
    // Self terminate
    Thread.terminate();
}

// Get a reference to the output div
var output = document.getElementById("output");

// Create a handler to handle the foundPrime event
function foundPrimeHandler(evt) {
    var findPrimeInfo = evt.data;
    output.innerHTML = "Total Primes Found: " + findPrimeInfo.count.toString() + "<br/>";
    output.innerHTML += "Percent Complete: " + Math.floor(findPrimeInfo.pctComplete * 100) + "%";
}

// Watch for the thread to terminate just for posterity sake :)
function threadTerminatedHandler(evt) {
    document.getElementById("status").innerHTML = "Complete!";
    var spinner = document.getElementById("spinner");
    spinner.classList.remove("spinner");
    spinner.style.backgroundColor = "rgba(180, 255, 180, 1)";
    output.innerHTML += "<br/>Thread self terminated";
}

if (threadjs.isSupported)
{
    // Create a thread and run the code
    try
    {
        var thread = new Thread();
        thread.addEventListener("foundPrime", foundPrimeHandler);
    	thread.addEventListener(Thread.TERMINATE, threadTerminatedHandler);
    	thread.exec(findPrimes, 500000);
    }
    catch(err)
    {
        document.getElementById("error").style.display = "block";
        document.getElementById("container").style.display = "none";
   ...