setTimeout seems to be executing instantly

Question

I am trying to teach myself some JavaScript and play around with recursion at the same time. The code I've written below I expect to print "inhale" to the console 10 times with a 5-second delay in between printing. However when I watch the console in Chrome's dev tools, all entries get printed seemingly instantaneously after refreshing the page. Can anyone help me find the error in my implementation? Thank you!

function breathe(type, counter, limit, duration) {
  if(counter <= limit) {
    setTimeout(console.log(type), duration);
    counter++;

    return breathe(type, counter, limit, duration);
  }

  console.log("Finished!");
}

var breathing = breathe("inhale", 1, 10, 5000);

Possible duplicate of [Why is the method executed immediately when I use setTimeout?](https://stackoverflow.com/questions/7137401/why-is-the-method-executed-immediately-when-i-use-settimeout) — isherwood, Sep 12 '17 at 18:31

sumeet kumar · Answer 1 · 2017-09-12T18:32:06.867

2

The setTimeout method expects a function ref. This should work.

function breathe(type, counter, limit, duration) {
  if(counter <= limit) {
    setTimeout(function(){console.log(type)}, duration);
    counter++;

    return breathe(type, counter, limit, duration);
  }

  console.log("Finished!");
}

var breathing = breathe("inhale", 1, 10, 5000);

edited Sep 12 '17 at 18:32

answered Sep 12 '17 at 18:28

sumeet kumar

2,628
1
16
24

score 1 · Answer 2 · answered Sep 12 '17 at 18:27

This is because you are executing your console statement immediately (since you are executing console.log via the ()), rather than passing in a function reference to setTimeout:

setTimeout(console.log(type), duration);

Try this instead:

setTimeout(function() {
    console.log(type)
}, duration);

Another form you could use (just to hammer-home the concept of passing a function reference) is this:

function callMeAfterDelay() {
    console.log(type);
}

setTimeout(callMeAfterDelay, duration);

score 1 · Answer 3 · answered Sep 12 '17 at 18:27

setTimeout(console.log(type), duration);

This is immediately executing console.log(type), and then passing the result into setTimeout. The result of console.log is undefined, so nothing happens when the timeout goes off.

Instead, you want to do this:

setTimeout(function () {
    console.log(type);
}, duration);

score 0 · Answer 4 · answered Sep 12 '17 at 18:31

0

I think this is what you want:

function breathe(type, counter, limit, duration) {
  if(counter <= limit) {
    setTimeout(function(){
        console.log(type);
        counter++;

        return breathe(type, counter, limit, duration);
    }, duration);
  }

  console.log("Finished!");
}

var breathing = breathe("inhale", 1, 10, 5000);

answered Sep 12 '17 at 18:31

Marcelo Lima

11
1

Stack Overflow answers should be more than just working code. They should explain what the problem was and how the solution solves it. – Scott Marcus Sep 12 '17 at 18:34

score 0 · Answer 5 · answered Sep 12 '17 at 18:41

var counter = 0;

var duration = 2000

var text = "Inhale";

var limit = 10;

function print(counter, duration, text, limit) {
  setTimeout(function(){
    console.log(text, counter)
    counter++;
    if (counter < limit) {
      print(counter, duration, text, limit);
    }
  },duration)
};

print(counter, duration, text, limit);

Try this.

setTimeout seems to be executing instantly

5 Answers5