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, Jun 15 '15 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, Jun 15 '15 at 16:47
possible duplicate of [setTimeout() with string or (anonymous) function reference? speedwise](http://stackoverflow.com/questions/4506074/settimeout-with-string-or-anonymous-function-reference-speedwise) — Rooster, Jun 15 '15 at 16:49

score 1 · Accepted Answer · answered Jun 15 '15 at 16:46

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 '15 at 16:46

taxicala

21,408
7
37
66

Thank you, that answer my question perfectly. – Nick Jun 15 '15 at 16:58
No problem, Glad to help you out! – taxicala Jun 15 '15 at 16:59

score 0 · Answer 2 · edited May 23 '17 at 10:26

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 '17 at 10:26

Community

1
1

answered Jun 15 '15 at 16:46

Batman

541
4
25

You're not passing names. You want pass the function itself. – Bergi Jun 15 '15 at 16:50

JavaScript recursive function breaks when () included in call

2 Answers2