How setTimeout works?

Question

I have a concern with setTimeout function in javascript. when we call setTimeout function without return anything, it is okay for me. like

setTimeout(function() {
   console.log("ok function called")
},2000); 

here in the above example it just simply call that function after 2000ms,

And if I write this like

setTimeout(function(params) {
   console.log("passed value is"+params)
},2000,55);

now it will call this function with 55 as an argument, right?

But problem is that when I call to write this like

setTimeout(function(params) {
   console.log("passed value is"+params)
}(55),2000);

here function is calling with 55 as params but it is now waiting for 2000ms

And when I wrote like

setTimeout(function(params) {
    console.log("passed value is "+params);
     return function(){
      console.log(params)
     };
 }(55),2000);

in this only return function is calling with 2000ms delay, the line console.log("passed value is "+params); is executing instantly

please help me get out of this problem.

Answer 1

One is a function. Another is a function call.

First, let's forget javascript for now. If you know any other programming language, what do you expect the two pieces of code below to do?

function a () { return 1 }

x = a;
y = a();

What do you expect x to be? 1 or a pointer to function a ?

What do you expect y to be? 1 or a pointer to function a ?

A function is not a function call. When you call a function it returns a value.

---

Now let's switch back to javascript. Whenever I get confused by a piece of code, I try to make the syntax simpler so that I can understand what's going on:

setTimeout(function() {console.log("ok function called")}, 2000);

Now, that's a compact piece of code, let's make the syntax simpler. The above code is the same as:

var a = function() {console.log("ok function called")};
setTimeout(a, 2000);

So what does that do? It will call the function a after 2 seconds.

Now let's take a look at:

setTimeout(function() {console.log("ok function called")}(), 2000);
                                  // Note this ----------^^

That's the same as:

 var b = function() {console.log("ok function called")}();
 setTimeout(b, 2000);

which can further be simplified to:

var a = function() {console.log("ok function called")};
var b = a();
setTimeout(b, 2000);

So I hope you see what you're really passing to setTimeout. You're passing the return value of the function, not the function.

Answer 2

When you write

setTimeout(function (params) { return something; }(55), 2000);

what actually happens is something like this:

var _temp_func = function (params) { return something; };
var _temp = _temp_func(55);
setTimeout(_temp, 2000);

The anonymous function you have as a parameter to setTimeout is evaluated immediately, even before the call to setTimeout itself. In contrast to that, the actual parameter that ends up in _temp here is called with a delay. This is what happens in your last example.

Answer 3

setTimeout takes only function name without parenthesis.
correct syntax : setTimeout(Helloworld) - here you are setting function
incorrect syntax : setTimeout(HelloWorld()) - here you are calling function

or non IIFE function. It's an IIFE that you are passing hence it is getting called immediately. setTimeout(function (params) { return something; }(55), 2000);