JavaScript recursive function breaks when () included in call

Question

I have created a countdown "Pomodoro" timer using JavaScript and JQuery. The code snippet I am referring to is the following:

var time = 1500;
var cycle = "long";
var tracker = 0;
var paused = false;

//Timer countdown function
function countdown(){
    if (!paused) {

        var seconds = ("00" + (time % 60)).slice(-2);

        $("#time").text(Math.floor(time/60) + ":" + seconds);
        $("title").text(Math.floor(time/60) + ":" + seconds);

        if (time > 0){
        time--;
        setTimeout(countdown, 1000);
        //Once the time is up, determine cycle, play chime and reset timer.
        } else {
            document.getElementById("bell").play();
            tracker++;

            if (tracker == 7) {
                cycle = "long";
                time = 1500;
                setTimeout(countdown, 1000);
            } else if (tracker == 8) {
                time = 1500;
                setTimeout(countdown, 1000);
                tracker = 0;
            } else if (cycle == "short" && tracker < 7) {
                cycle = "long";
                time = 1500;
                setTimeout(countdown, 1000);
            } else if (cycle == "long" && tracker < 7) {
                cycle = "short";
                time = 300;
                setTimeout(countdown, 1000);
            }
        }  
    } else {
        setTimeout(countdown, 1);
    } 
}
setTimeout(countdown(), 1000);

The function calls "setTimeout(countdown, 1000);" located inside the "else" portions of the if statements cause a break in the program when written as follows: "setTimeout(countdown(), 1000);", as I believe a function should normally be invoked. I am completely baffled by this and would very much appreciate if someone was kind enough to offer an explanation.

Question: Why does the program break if "()" is added after the word "countdown"?

setTimeout takes a function as a paramter. So, I'd think that setTimeout(countdown, 1000); would be correct. :) — Davin Tryon
– Davin Tryon, Commented Jun 15, 2015 at 16:43
like @DavinTryon said, it takes a function. countdown() is a statement to execute the function countdown. if you wanted to do that, you'd need to wrap it inside an anonymous function, ie. function(){countdown()}. Also, despite the wording of this question, its clearly a duplicate. — Rooster
– Rooster, Commented Jun 15, 2015 at 16:47
possible duplicate of setTimeout() with string or (anonymous) function reference? speedwise — Rooster
– Rooster, Commented Jun 15, 2015 at 16:49

taxicala · Accepted Answer · 2015-06-15 16:46:55Z

1

If you write down setTimeout(countdown(), 1000);, basically when that block of code gets evaluated, JS will call countdown() inmediatelly. By doing setTimeout(countdown, 1000);, you are passing a reference to the function countdown as the first argumant, thus, it won't be executed until 1 second later as per the second argument (1000).

answered Jun 15, 2015 at 16:46

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

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

1 Comment

taxicala Over a year ago

No problem, Glad to help you out!

Community · Accepted Answer · 2017-05-23 10:26:36Z

0

It's a syntax issue. In javascript, you don't pass in the parenthesis with the function, just the name of the function. See this post.

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered Jun 15, 2015 at 16:46

Batman

5424 silver badges25 bronze badges

1 Comment

Bergi Over a year ago

You're not passing names. You want pass the function itself.

Collectives™ on Stack Overflow

JavaScript recursive function breaks when () included in call

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related