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 - Getting Started</h1>

<!-- Create some errors to show if browser isn't supported -->
<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 creates a thread.js background thread that prints a message to the console. Press F12 to open your console.</p>
</div>

JavaScript

// Check for support and then create the thread
if (threadjs.isSupported) {
    
    // Create a thread and run the code
    try {
        var thread = new Thread(function(){
			// do something in the thread
            console.log("hello world from the thread!");
        });
        
    } catch(err) {
        document.getElementById("error").style.display = "block";
        document.getElementById("container").style.display = "none";
    }
} else {
	document.getElementById("unsupported").style.display = "block";
    document.getElementById("container").style.display = "none";
}