Java Like Thread in JavaScript Implementation

Posted on Updated on

Have you ever wondered how to create a thread class in JavaScript.Or maybe you were taught about computer  thread and the programming language that was used to desmostrate it was  either  Java or C# or C++  e.t.c . However  now you are interested in web programming and you want to do cool things that run on their own thread but you don’t know how to go about it in JavaScript right?  Welcome to javascript hacking. In this article I will demostrate how to create  Java like Thread class in JavaScript.

How to create a Java like thread class in Javascript , Well  the structure of the Java thread class is very simple and easy to use. If you are a Java programmer you know what I am trying to say here but don’t worry if you’re not.

So what does the thread class do ? It runs a pieces of code separately in the background of the main application. In Javascript  there is no support for such features but what most of us do  is to force the  timer functions that was provided  in JavaScript to behave like one. The use of the timer functions can make your life easier perhaps.

The Java thread class takes a runnable interface and a thread name;  in Java programming language right? Uhmmm…, we are going to do similar one here.

JavaScript Implementation

First let create an interface class called Runnable with a namespace js. as shown belowrunnable

Run your code,  did it work? Yea! I guess , that is how you create an interface class in JavaScript.  Let’s now create the main Thread class that will accept the Runnable object and the thread name.

threadclass

Aaaaa! what is happening? Don’t worry I am going to explain some things here lol. The Thread class have two paramater arguments  that accept the Runnable object and  thread name. The private onInit function is used to initialised the thread class attributes.

The thread class   stored the runnable object  in its  runnable attribute so that it can call it later  when the thread  has been started.

startthread

Additional  public attributes has been added to the Thread class so as to be used to control the thread object.

The sleep attribute is used to control how long the thread will sleep before it calls the run function of the Runnable interface  while the  interupt attribute is used to kill the thread when it’s set to true.

Okay, now the  start method is used to  start the thread to start running in the background of the main browser thread.

The main job of the thread class is on the start thread , that is when the thread will be created and assigned a thread Id.

How to use  the thread class we just created  above

Before we do that please copy this peices of code below (Java Inheritance)

Extends function(for inheritances)

extends

First if you know how to do javascript inheritance you will be fine with this function above.  I assume you  understand how JavaScript performs object inhertances. Anyway let create a Game class  that will extends the js.Runnable interface as Shown  to desmostrate how to used the thread class we have created.

game

In the start method of the game a new game  thread named “game”is created just like the way Java programming language implements it .

Finally,  let create a game object then and test it

startgame

Wooo if you are in this stage now, congraulation that is how you do Threading in JavaScript.

Output is shown in the Mozila Firefox Broswer below:

outputf

 

View the code here  thread.js

First times for reading , and now you can copy the code and used it in your application , you can thank me later .

Please drop your feedback ….

Leave a comment