JavaScript Threading

Ever ran into the lovely "Unresponsive script" error in your browser? This comes from several issues. 

1. The persons running out of memory on their machine and the browser is taking longer than expect.
2. The script that was created is doing to much and needs to be broken up.

In this article I will explain how to get around this using JavaScripts setInterval to make the browser sleep and then continue executing.

The Problem:

Unresponsive script error appears and allows the user to either stop the script and break the page. 

The Solution:

I have modified a co-workers framework (Tim Boronczyk) for queueing a list of functions. He originally used it for "Validations" I found it useful for loading and now "Threading." I have added a two part process to this to allow for threading and non-threading processing. I think this works great, but could see numerous feature additions to this such as a timer to allow possibly more work to be done per interval.

wareThread = function(){
	 
		 var funcs = [], threading = true, 
		 				 thread = null, 
		 				 thread_speed = 100;
		 
		 /*** 
		  *	Registering a function into a queue.
		  */
		 this.register = function(func){
		 	funcs[funcs.length] = func;
		 }
		 
		 /***
		  *	Execute the queue to run through the list of functions.
		  */
		 this.execute = function(){
			 
			 var index = 0,
			 	 funcsLen = funcs.length;
			 
			 /**
			  * Threading or None Threaded Function Loops
			  */
			 if(threading){
			    var thread = setInterval(function(){
           
                 		if(index < funcsLen){
                 			//If the function returns false stop!
                 			if (funcs[index]() === false) {
	                	 		clearInterval(thread);
	                	 		return false;
	                	 	}else{
	                	 		//If not false increment up and do the next.
		            	     	index+=1; 
		            	    }
                    		}else{
                    			clearInterval(thread);
                    		}
                    	    }, thread_speed); 
			 }else{
			 /** 
			  * Regular loop through 
			  */ 
			  for(/* index = 0*/; index < funcsLen; index += 1){ 
			  	if(funcs[index]() === false){ 
			  		return false; 
			  	} 
			  } 
			  return true; 
			 } 
		} 
}

Testing Code:

t = new wareThread();
t2 = new wareThread();
	 
t.threading = false;
t2.thread_speed = 2000;
	 
t.register(function(){ alert("Func1"); });
t.register(function(){ alert("Func2"); });
t.register(function(){ alert("Func3"); t2.execute(); });
	 
t2.register(function(){ console.log("Func1"); });
t2.register(function(){ console.log("Func2"); });
t2.register(function(){ console.log("Func3"); });
	 
t.execute();

I use a similar logic for a huge "Checkbox Tree" that builds thousands of branches and end points. The tree itself takes minimal amounts of time to load, but required breaking up the work. 

Sources:

Script Base: Timothy Boronczyk http://zaemis.blogspot.com/