Calling JavaScript Function that has SetTimeout Assigned to It

Question

I'm not 100% sure how setTimeout works in JavaScript. Say I have something like this:

$(document).ready(function() {           
    testTimeout();        
});

function testTimeout() {
    alert("testing timeout");
    setTimeout(testTimeout, 5000);
}

This would display a popup window every 5 after the page is ready. What would happen if then I called testTimeout from a button click?

$("#button").click(function() {        
    testTimeout();
});

Would the button click call testTimeout and add another timeout every 5 seconds? Or, would the button click reset the timeout from when the button was pressed? The reason I am asking is because I would like to design something like this where I can pass a parameter to my timeout function. When the web page starts up, I have a default parameter. However, if I press a button, I would like my timeout function to be called right away and every 5 seconds after with my new parameter. But, I don't want the timeout function with the old parameter to continue repeating. How can I achieve this? Any help and understanding would be greatly appreciated.

"This would display a popup window every 5 after the page is ready. " No it wouldn't, it would show an alert repeatedly with no delay. — T.J. Crowder
– T.J. Crowder, Commented Nov 5, 2014 at 15:22
OP editted, a quote and a parentheses was edited (see your answer, you'll see it) — Sterling Archer
– Sterling Archer, Commented Nov 5, 2014 at 15:26
do you want to reset the timeout when you click the button or just do nothing? — Logan Murphy
– Logan Murphy, Commented Nov 5, 2014 at 15:48

T.J. Crowder · Accepted Answer · 2014-11-05 15:48:06Z

2

This would display a popup window every 5 after the page is ready.

No it wouldn't, it would show an alert repeatedly with no delay and/or cause a "too much recursion" error, because setTimeout(testTimeout(), 5000) calls testTimeout and passes its return value into setTimeout, just like foo(bar()) calls bar and passes its return value into foo.

If you remove the ():

function testTimeout() {
    alert("testing timeout");
    setTimeout(testTimeout, 5000);
    // here --------------^
}

Then it would do that.

What would happen if then I called testTimeout from a button click?

You'd end up with the function being called twice as often (more than once every 5 seconds), because every time you call it, it reschedules itself. A third time would make it more frequently still (three times/second), and so on.

If you want to avoid that, one option is to remember the timer handle and cancel any outstanding timed callback if you call the function before then:

var handle = 0;
function testTimeout() {
    clearTimeout(handle); // Clears the timed call if we're being called beforehand
    alert("testing timeout");
    handle = setTimeout(testTimeout, 5000);
}

(I initialized handle with 0 because calling clearTimeout with a 0 is a no-op.)

edited Nov 5, 2014 at 15:48

answered Nov 5, 2014 at 15:24

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

4 Comments

Sterling Archer Over a year ago

This script is a recursive nightmare D:

T.J. Crowder Over a year ago

@SterlingArcher: It was as originally written, yeah. Without the () it's a fairly common idiom for a repeated action (the other being, of course, setInterval).

user3781214 Over a year ago

Sorry, I forgot to remove the () from setTimeout. So, how do I prevent it from rescheduling itself? I only want one timeout every 5 seconds. But, when I click a button, I would like to change the parameter being used in the timeout function.

T.J. Crowder Over a year ago

@user3781214: You can do that by saving the timer handle and using clearTimeout, I've added that to the above.

Logan Murphy · Accepted Answer · 2014-11-05 15:45:33Z

1

Have you tried to asign variable to your setinterval;

var foo = setTimeout(testTimeout(), 5000);

and then when right event comes just destroy that variable.

clearInterval(foo);

And now you can asign it again...

edited Nov 5, 2014 at 15:45

Logan Murphy

6,2403 gold badges28 silver badges44 bronze badges

answered Nov 5, 2014 at 15:28

sirgijan

92 bronze badges

Comments

Kenneth · Accepted Answer · 2014-11-06 12:28:48Z

-1

In your case it would simply repeat endlessly, because you're executing the function instead of passing the reference. You should do it like this:

function testTimeout() {
    alert("testing timeout)";
    setTimeout(testTimeout, 5000);
}

Note the missing braces after testTimeout. This tells setTimeout to execute that function, instead of the result of that function, which is how your original code behaved.

" I would like my timeout function to be called right away and every 5 seconds after with my new parameter. But, I don't want the timeout function with the old parameter to continue repeating "

In order to achieve what you're trying to do you should remove the timeout:

var timeoutId;
function testTimeout() {
    alert("testing timeout)";
    clearTimeout(timeoutId );
    timeoutId = setTimeout(testTimeout, 5000);
}

Notes:

You can stop the previous timeoutI from firing by catching the id returned from the setTimeout method and passing that to the clearTimeout method

edited Nov 6, 2014 at 12:28

answered Nov 5, 2014 at 15:27

Kenneth

28.8k7 gold badges65 silver badges85 bronze badges

2 Comments

Logan Murphy Over a year ago

you can clearTimeout too, so there is no need to resort to intervals

Kenneth Over a year ago

True, I forgot he was calling the same method, which trigger anothers setTimeout

Collectives™ on Stack Overflow

Calling JavaScript Function that has SetTimeout Assigned to It

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related