Recursion and setTimeout in JavaScript

Question

I have a recursive function in my JavaScript file. It looks something like this:

function process(node){
    if(someCondition)
        return someValue;
    a = process(node.children);
    b = doSomething(a);
    return b;
}

The problem is that I want to display the state of the system to the HTML output on each step of this recursion. There should be a delay between each step. (Just assume that I want to display the recursion live to the users). In any other language I would use a delay() call inside the function, but since JavaScript supports nothing other than setTimeout() to do something like this, I am lost because I don't know how to use the setTimeout call in this particular case.

Normally in simpler cases I would use something like this:

function process(node){
    if(someCondition)
        return someValue;
    setTimeout("process(node.children)", delay);
}

;but since my original function returns a value, I don't know how to proceed.

Thanks in advance.

Is there any reason you want to display it live to the users? If you would explain maybe we could change your mind or suggest something different to you. — Alex
– Alex, Commented Sep 4, 2010 at 2:40

Matt · Accepted Answer · 2010-09-03 14:38:56Z

1

I think this will not work as a pure recursive algorithm.

You could store the current value of b in a global variable.

You could then us setInterval to process the value in a similar way, updating the value of b on each iteration, using clearTimeout to stop execution when the condition is met.

answered Sep 3, 2010 at 14:38

Matt

1,2678 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

c0rnh0li0 · Accepted Answer · 2010-11-07 22:16:04Z

1

Put all the calls into anonymous functions.
Put them into a queue.
Use a recursive function to apply a 0ms setTimeout on each function.

Example:

var queue = [];
queue.push(function(){callYourCodeThatTakesSomeTime('param1','param2','...')});
var defer = function(queue){
    if (!queue.length)
        return;
    queue.shift()();
    setTimeout(defer, 0, queue);
}
defer(queue);

answered Nov 7, 2010 at 22:16

c0rnh0li0

1491 silver badge8 bronze badges

Comments

Seth · Accepted Answer · 2010-09-03 06:55:48Z

0

You might try a web worker, if you're targeting HTML5.

answered Sep 3, 2010 at 6:55

Seth

46.8k10 gold badges87 silver badges123 bronze badges

1 Comment

Niyaz Over a year ago

Unfortunately, it looks like even web workers cannot solve this problem. Any ideas?

gtournie · Accepted Answer · 2013-05-15 13:53:28Z

0

What about that?

var result;

function process(node) {
  if (arguments.length > 1) {
    result = doSomething(result);
    displayResult();
  }
  if (someCondition) {
    result = someValue;
    displayResult();
    return;
  }
  setTimeout(function() {
    process(node.children, true);
  }, delay);
}

answered May 15, 2013 at 13:53

gtournie

4,4321 gold badge23 silver badges22 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:13:08Z

0

You can easily update the dom if you use "safe" recursion, see https://stackoverflow.com/questions/24208676/how-to-use-recursion-in-javascript/24208677

/*
this will obviously crash... and all recursion is at risk of running out of call stack and breaking your page...

function recursion(c){
    c = c || 0;
    console.log(c++);
    recursion(c);
}
recursion();

*/

// add a setTimeout to reset the call stack and it will run "forever" without breaking your page!
// use chrome's heap snapshot tool to prove it to yourself.  :)

function recursion(c){
    setTimeout(function(c){
        c = c || 0;
        console.log(c++);
        recursion(c);
    },0,c);
}

recursion();

// another approach is to use event handlers, but that ultimately uses more code and more resources

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Jun 13, 2014 at 15:23

chad steele

1,00811 silver badges17 bronze badges

Collectives™ on Stack Overflow

Recursion and setTimeout in JavaScript

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related