Ever ran into the lovely "Unresponsive script" error in your browser? This comes from several issues.
- The persons running out of memory on their machine and the browser is taking longer than expect.
- 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/