How to use setTimeout in a recursion to avoid browser from getting stuck on complicated processes

Question

I have this code that uses an inefficientProcess() that consumes plenty of memory:

My goal is to use some sort of setTimeout(function(){...},0) technique so the browser will not get stuck while executing the code.

How do I change the code so it will work with setTimeout?

function powerOfTwo(num) {
    inefficientProcess();
    if (num > 0) {
        return powerOfTwo(num-1)*2;
    } else {
        return 1;
    }
}

function inefficientProcess() {
    var sum;
    for (var i=0; i < 500000; i++) {
        sum+=10;
    }
}

powerOfTwo(1000);

My goal is ofcourse to learn how to avoid browser crush when executing heavy calculations.

So...you are asking how to break up the loop inside inefficientProcess so that it will only block for short periods? What is your question, exactly? — dgvid
– dgvid, Commented Feb 25, 2013 at 18:24

André Alçada Padez · Accepted Answer · 2013-02-25 18:39:56Z

Javascript is single-threaded, and all your code is blocking. There is a new standard in HTML5, WebWorkers API, that will allow you to delegate your task to a different thread. You can then pass a callback function to be executed with the result.

https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers

Simple example:

function powerOfTwo(num, callback) {
    var worker = new Worker('inneficient.js');
    worker.postMessage('runTask');
    worker.onmessage = function(event) {
        var num = event.data.result;
        var pow;
        if (num > 0) {
            pow = Multiply(num-1)*2;
        } else {
            pow = 1;
        }
        callback(pow);
    };    
}

powerOfTwo(1000, function(pow){
    console.log('the final result is ' + pow);
});

in inneficient.js you have something like:

//inneficient.js

function inefficientProcess() {
    var sum;
    for (var i=0; i < 500000; i++) {
        sum+=10;
    }
     postMessage({ "result": sum});
}

inefficientProcess();

Andy Magee · Accepted Answer · 2013-02-25 18:37:57Z

2

As was mentioned in Andre's answer, there's a new HTML5 standard that will allow you to set off a task on a different thread. Otherwise, you can call setTimeout with a time of 0 to allow the current execution path to finish (and perhaps some UI changes to render) before the inefficientProcess is called.

But whether you can use HTML5 or not, the powerOfTwo function has to be changed to be asynchronous - whoever calls it needs to provide a callback method that will be called when (a) a thread spun up via WebWorkers returns, or (b) the setTimeout method finishes.

Edited to add example:

function powerOfTwo(num, callback)
{
    setTimeout(function ()
    {
        inefficientProcess();
        if (num > 0)
            callback(Multiply(num-1)*2);
        else
            callback(1);
    }, 0);
}

function inefficientProcess() { ... }

edited Feb 25, 2013 at 18:37

answered Feb 25, 2013 at 18:23

Andy Magee

2363 silver badges10 bronze badges

4 Comments

Alon Over a year ago

can you show me an example? I really need some code to see in my eyes to figure out how to handle this issue

Andy Magee Over a year ago

function powerOfTwo(num, callback) {     setTimeout(function () {       inefficientProcess();       if (num > 0) {         callback(Multiply(num-1)*2);       } else {         callback(1);       }     }, 0); }  function inefficientProcess() {     var sum;     for (var i=0; i < 500000; i++) {         sum+=10;     } }

Alon Over a year ago

how do you trigger this function? powerOfTwo(100,WhatGoesHere) ?

Andy Magee Over a year ago

Another function name goes in there. In Javascript a function is treated like any other object, so you can pass in the name of some other function to be used as a callback: powerOfTwo(100,callbackFunctionName). Or you can pass in an anonymous function (like the function I passed into setTimeout in my example).

JudgeProphet · Accepted Answer · 2013-02-25 18:25:59Z

0

The HTML element allows you to define when the JavaScript code in your page should start executing. The “async” and “defer” attributes were added to WebKit early September. Firefox has been supporting them quite a while already.

Saw that on this Site

answered Feb 25, 2013 at 18:25

JudgeProphet

1,7493 gold badges27 silver badges44 bronze badges

Collectives™ on Stack Overflow

How to use setTimeout in a recursion to avoid browser from getting stuck on complicated processes

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related