In this example, we have the exact same setup, only this time the code that handles counting down from 1,000,000,000 is inside of a Web Worker.
Notice that here you can change the color of the button at the same time that the while loop is running it's code? This is because the Web Worker is running the While loop on a different thread which leaves our main page's thread open, allowing the color changing event listener to run!
Setting up Web Workers is fairly easy, just call it's constructor and pass in the .js file that you want it to run! Here are the two .js files that we used in this demo:
"counter.js" just counts down from 1 billion and console logs once every million numbers. Then it logs the ending message:
let counter = 1000000001
while( counter-- ) {
if( counter % 100000000 === 0 ){
console.log( `While loop is Currently at : ${counter}` )
}
}
console.log( '--------- While Loop has Ended! ---------' )
While the "app.js" file just creates a new Worker() and passes in the "counter.js" file:
new Worker('counter.js')
Finally, the html file points to app.js which creates the Web Worker. The Web Worker then loads in "counter.js" where it will run on a Web Worker thread.