Simulate Threading Using Javascript

One of the cool things about .NET is how easy it is to create more than one thread for your application to run on. On a recent project I had to make many calls to different web services on our network. They were all identical, but each call took quite awhile, roughly around 2 or 3 seconds each.

Instead of doing one at a time, I created 10 separate threads and then merged the results together. Instead of taking around 20 seconds, the calls were reduced to the length of the slowest call. (Web Services also have an Asynchronous method to call a service, so that is an alternative as well).

So What Does This Have To Do With Javascript?

In Javascript, any long running process will cause a noticeable lag for a user. Buttons won’t respond, links don’t do anything, the screen may even turn white — clearly not the user experience we want to deliver.

Recently I was experimenting with joining records using jLinq. jLinq was doing fairly well with the records I was using – I had about 850 records to join against a handful (about 10) of other records. The process finished in around 250ms to 500ms. I was pretty satisfied — until I tried a different set of records…

A different set of records, around 90, crippled the browser. After about 8 seconds the browser finally released itself and we were back in business. Yikes.

Simulating A Thread

So what are the options here? Well unless someone has built threading into Javascript then we’re forced to come with a more creative solution — enter setTimeout.

If you’ve read some of my blog posts before, you know I’m a big fan of enclosures. Using Javascript we can take advantage of both enclosures and setTimeout to try and simulate threading and reduce the time a browser is locked up.

So let’s say we’re working with a really large loop, say around 500,000 records – What can we do? One idea is to break up the work into smaller, more manageable chunks.

//loops through an array in segments
var threadedLoop = function(array) {
	var self = this;
	
	//holds the threaded work
	var thread = {
		work: null,
		wait: null,
		index: 0,
		total: array.length,
		finished: false
	};
	
	//set the properties for the class
	this.collection = array;
	this.finish = function() { };
	this.action = function() { throw "You must provide the action to do for each element"; };
	this.interval = 1;
	
	//set this to public so it can be changed
	var chunk = parseInt(thread.total * .005);
	this.chunk = (chunk == NaN || chunk == 0) ? thread.total : chunk;
	
	
	//end the thread interval
	thread.clear = function() {
		window.clearInterval(thread.work);
		window.clearTimeout(thread.wait);
		thread.work = null;	
		thread.wait = null;
	};
	
	//checks to run the finish method
	thread.end = function() {
		if (thread.finished) { return; }
		self.finish();
		thread.finished = true;
	};
	
	//set the function that handles the work
	thread.process = function() {
		if (thread.index >= thread.total) { return false; }
	
		//thread, do a chunk of the work
		if (thread.work) {
			var part = Math.min((thread.index + self.chunk), thread.total);
			while (thread.index++ < part) {
				self.action(self.collection&#91;thread.index&#93;, thread.index, thread.total);
			}					
		}
		else {
		
			//no thread, just finish the work
			while(thread.index++ < thread.total) {
				self.action(self.collection&#91;thread.index&#93;, thread.index, thread.total);
			}	
		}
		
		//check for the end of the thread
		if (thread.index >= thread.total) { 
			thread.clear(); 
			thread.end();
		}
		
		//return the process took place
		return true;
		
	};
	
	//set the working process
	self.start = function() {
		thread.finished = false;
		thread.index = 0;
		thread.work = window.setInterval(thread.process, self.interval);
	};
	
	//stop threading and finish the work
	self.wait = function(timeout) {

		//create the waiting function
		var complete = function() {
			thread.clear();
			thread.process();
			thread.end();
		};
		
		//if there is no time, just run it now
		if (!timeout) {
			complete();
		}
		else {
			thread.wait = window.setTimeout(complete, timeout);
		}
	};

};

// Note: this class is not battle-tested, just personal testing on large arrays

This example class allows us to pass in a loop and then supply a few actions for us to use on each pass. The idea here is that if we do a section, pause for the browser to catch up, and then resume work.

How exactly do you use this? Well let’s just say we have a really large loop of strings we’re wanting to compare…

var array = [];
for (var i = 0; i < 500000; i++) { array.push("this is some long string"); } [/sourcecode] That's a lot of work to check all those - Let's move it into our new class we created... [sourcecode language='javascript'] //create our new class var work = new threadedLoop(array); //create the action to compare each item with work.action = function(item, index, total) { var check = (item == "this is some long string comparison to slow it down"); document.body.innerHTML = "Item " + index + " of " + total; }; //another action to use when our loop is done work.finish = function(thread) { alert("Thread finished!"); }; //and start our 'thread' work.start(); [/sourcecode] If you run this test in a browser, you'll see that our page is updated as each pass of the array is completed. This way our browser remains 'responsive' to a degree, but continues to process our work in the background. This code allows you to set a few additional properties as well as an additional function.

• chunk: The number of records to loop through on each interval. The default is numberOfRecords * 0.005.
• interval: The number of milliseconds to wait between passes. The default is 1. A longer value gives the browser more time to recover, but makes the loop take longer.
• wait([timeout]): Waits the number of milliseconds before canceling the thread and blocking the browser until the work finishes. If no time is provided, as in left blank, the waiting starts immediately.

Threading Possibilities?

It’s always amazing to see what enclosures can do – I’m not so sure how simple this same creation would be in Javascript without them. With a little bit of code we can create a half-way decent attempt at creating an asynchronous experience for our user, even if we have a lot of work to do.

Could your heavy client side scripts benefit from ‘threading’?

jLinq (LINQ for JSON) Screencast #2 – Creating Your Own Extension Methods

jLinq is a Javascript library that allows you to do LINQ style queries with JSON data.

Did you know that jLinq let’s you extend the base library with your own methods? Did you realize that any method you create plugs right in and works with the built in jLinq features?

This screencast goes over some of the basics to creating your first extension method for jLinq.

Creating A Query Method

A Query method is what determines what records stay and which records are removed from a jLinq query. Here is a sample of what a extension method looks like.

jLinq.extend({
    name:"evenValues", //the name of this method
    type:"query", //the kind of method this is
    count:0, //how many parameters we expect
    method:function(query) {	

        //determine how to evaluate the value being compared
        var compare = query.when({
            "string":function() {
                return query.value.length;
            },
            "array":function() {
                return query.value.length;
            },
            "other":function() {
                return query.helper.getNumericValue(query.value);
            }
        });		
        
        //the actual comparison
        return compare % 2 == 0;		
    }
});

You’ll notice we provide the name of this new method, the kind of method (in this instance, a query method), the expected number of parameters (not counting the field name) and then the actual method we use to determine if we keep the record.

If you don’t understand how this works exactly then you might want to watch the screencast at the end of this post to see how this works step by step.

Operator Naming

This screencast also explains operator naming. When you extend a query method, several additional operator prefixed name methods are added to jLinq as well. Each of these perform the correct switches when they are used. For example…

//this method is one way to do it
jLinq.from(data.users)
    .less("age", 30)
    .or()
    .evenValues()
    .select();

//this method was generated automatically - saves us a step!
jLinq.from(data.users)
    .less("age", 30)
    .orEvenValues()
    .select();

Of course, if you name your method something like orHasSomeValue() you’re going to end up with some strangely named operator methods (for example orOrHasSomeValue()).

It’s Simple–ish

Extension methods are a little confusing at first but after you create your first one you should be on your way. This screencast will get you started in that direction.

Watch Screencast #2 – Extending A Method In jLinq

.