Javascript Factorial UI Thread Demo

Demo code taken from the post “Separating the Javascript UI Thread to create more responsive web apps

This interface will not be blocked while factorial is being calculated

HTML Source

<html>
<head>
<script src="factorial.js"> </script>
</head>
<body>
Demo code taken from the post "<a href="http://akeem.mclennon.com/2014/07/separating-the-javascript-ui-thread">Separating the Javascript UI Thread to create more responsive web apps</a> <br />

This interface will not be blocked while factorial is being calculated
<select><option>1</option><option>2</option></select>
<script type="text/javascript">
    var myWorker = new Worker("factorial.js");
    myWorker.onmessage = function (oEvent) {
        alert("Worker said : " + oEvent.data);
    };
    myWorker.postMessage(1000000000);
    factorial_recursive(1000,function(result){ alert("factorial_recursive :" + result)});
    alert("This message will not be blocked by previous code");
</script>

</script>
</body>
</html>

<html>

<head>

</head>

<body>

Demo code taken from the post "<a href="http://akeem.mclennon.com/2014/07/separating-the-javascript-ui-thread">Separating the Javascript UI Thread to create more responsive web apps</a> <br />

This interface will not be blocked while factorial is being calculated

var myWorker = new Worker("factorial.js");

myWorker.onmessage = function (oEvent) {

alert("Worker said : " + oEvent.data);

};

myWorker.postMessage(1000000000);

factorial_recursive(1000,function(result){ alert("factorial_recursive :" + result)});

alert("This message will not be blocked by previous code");

</script>

</body>

</html>

factorial.js

/**
  * Calculates n factorial by pairing a recursive function with 
  * setTimeout in order to prevent UI blocking 
  * @param {Integer} n - The number you want to calculate factorial for
  * @param {Function} callback - A callback function that takes the result as an argument
  * @example 
  *     factorial_recursive(10000,function(result){ console.log(result)});
*/
function factorial_recursive(n,callback,result){
    if(!result){
        result = 1;
    }
    if(n === 0){
        callback(result);
    }
    else{
        var result = n * result;
        setTimeout(function(){
            factorial_recursive(n - 1,callback,result)
        },0);
    }
}
/**
  * Calculates n factorial iteratively when used with the web worker api
  * @param {Integer} n - The number you want to calculate factorial for
  * @example 
  *     var myWorker = new Worker("factorial.js");
  *     myWorker.onmessage = function (oEvent) {
  *         console.log("Worker said : " + oEvent.data);
  *     };
  *     myWorker.postMessage(100000);
  *     factorial_recursive(100000,function(result){ console.log(result)});
*/
function factorial_iterative(n){
    var val = 1;
    for(var i = 2; i <= n; i++ ){
        val = i * val;
    }
    return val;
}
onmessage = function (oEvent) {
  postMessage(factorial_iterative(oEvent.data));
};

/**

* Calculates n factorial by pairing a recursive function with

* setTimeout in order to prevent UI blocking

* @param {Integer} n - The number you want to calculate factorial for

* @param {Function} callback - A callback function that takes the result as an argument

* @example

* factorial_recursive(10000,function(result){ console.log(result)});

function factorial_recursive(n,callback,result){

if(!result){

result = 1;

}

if(n === 0){

callback(result);

}

else{

var result = n * result;

setTimeout(function(){

factorial_recursive(n - 1,callback,result)

},0);

}

/**

* Calculates n factorial iteratively when used with the web worker api

* @param {Integer} n - The number you want to calculate factorial for

* @example

* var myWorker = new Worker("factorial.js");

* myWorker.onmessage = function (oEvent) {

* console.log("Worker said : " + oEvent.data);

* };

* myWorker.postMessage(100000);

* factorial_recursive(100000,function(result){ console.log(result)});

function factorial_iterative(n){

var val = 1;

for(var i = 2; i <= n; i++ ){

val = i * val;

}

return val;

}

onmessage = function (oEvent) {

postMessage(factorial_iterative(oEvent.data));

};