setTimeout and recursive function with parameters

Question

I'm trying to do something like that :

I want to call the doSomething() function only when the tab has loaded class (it may take 3 or 5 seconds).

function addInfosSinistre(msg){
     addInfosSinistreRecursive(msg, 0);
}

function addInfosSinistreRecursive(msg, nbCalls) {
    if ($("#tab").hasClass('loaded')) {
        doSomething();
    }else if (nbCalls < 10) {
        setTimeout(addInfosSinistreRecursive(msg, nbCalls+1),500);
    }
}

This is not working, it seems like the timer doesn't work. Is there something wrong here ?

Yes, there's something wrong, you're calling the function, not referencing it, so the timer doesn't work, but that's not the main issue, if you're waiting for something to load, you shouldn't be using timeouts, you should be using callbacks, events or whatever, but without knowing how and what you're waiting for, we can't help you. And no, a class attribute doesn't really load, there must be something else going on ? — adeneo
– adeneo, Commented Sep 17, 2014 at 12:01

Sirko · Accepted Answer · 2014-09-17 12:51:22Z

2

What you actually do, is to execute the function addInfosSinistreRecursive and the pass the return value to setTimeout(). What you actually want to do is to pass a function reference.

One way of doing so is to create a closure for the variables like this:

function addInfosSinistreRecursive(msg, nbCalls) {

  function timeoutHandler(){
    if ($("#tab").hasClass('loaded') ) {
        doSomething();
    }else if (nbCalls < 10) {
        nbCalls += 1;
        setTimeout( timeoutHandler, 500 );
    }
  }

  // first execution
  timeoutHandler();

}

The function timeoutHandler() can reference the parameters to addInfosSinistreRecursive() and has no parameters of its own. Hence you can pass a reference to it to setTimeout().

edited Sep 17, 2014 at 12:51

answered Sep 17, 2014 at 12:01

Sirko

74.3k19 gold badges157 silver badges194 bronze badges

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

Comments

JLRishe · Accepted Answer · 2014-09-17 13:02:22Z

1

Yes, there's definitely something wrong here. You're immediately calling the function and passing undefined to setTimeout() instead of giving it a function to call. This would do what you are trying to do:

function addInfosSinistreRecursive(msg, nbCalls) {
    if ($("#tab").hasClass('loaded')) {
        doSomething();
    }else if (nbCalls < 10) {
        setTimeout(addInfosSinistreRecursive.bind(this, msg, nbCalls + 1), 500);
    }
}

But the question is why are you trying to do this? It seems like a convoluted way to do whatever it is you are trying to accomplish. You should probably be using an event somewhere when the tab is changed rather than recursively looping and waiting for the tab to change.

edited Sep 17, 2014 at 13:02

answered Sep 17, 2014 at 12:01

JLRishe

102k19 gold badges138 silver badges171 bronze badges

5 Comments

user3469203 Over a year ago

Yes, I assume an event must be a better way... but I'm quite a beginner is JS, so...

user3469203 Over a year ago

sirko's answer is working, so I have to learn about event... thanks

JLRishe Over a year ago

@user3469203 Did you try my answer? It's a lot more concise and should have essentially the same behavior as Sirko's.

user3469203 Over a year ago

Sorry I didn't try. I've tried sirko's one first, and it works, so.

JLRishe Over a year ago

@user3469203 Ok... You're of course free to choose whichever answer you like, but generally the rule of thumb is to choose the best answer, not the first one you try that works. But do as you will.

Collectives™ on Stack Overflow

setTimeout and recursive function with parameters

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related