Calling Functions With Settimeout()

Calling a function when using setTimeout() and setInterval() in JavaScript

You must pass a function reference to both setTimeout() and setInterval(). That means you pass a function name without the () after it or you pass an anonymous function.

When you include the () after the function name as in func(), you are executing the function immediately and then passing the return result to setInterval() or to setTimeout(). Unless the function itself returns another function reference, this will never do what you want. This is a very common mistake for Javascript programmers (I made the same mistake myself when learning the language).

So, the correct code is:

setTimeout(func, 1500);
setInterval(func, 1500);

If you know other languages that use pointers, you can think of the name of a function with the () after it as like a pointer to the function and that's what a function reference is in Javascript and that's what you pass to a function when you want it to be able to execute some function later, not immediately.

When you mistakenly do this:

setTimeout(func(), 1500);
setInterval(func(), 1500);

It is executing your func() immediately and then passing the return result to setTimeout() and setInterval(). Since your func() doesn't return anything, you are essentially doing this:

func();
setTimeout(undefined, 1500);

Which is what you observe happening, but not what you want.

Further, if you want to execute a specific function call such as console.log("Bowties are cool."), then you can wrap it in another function like this:

setTimeout(function() {
    console.log("Bowties are cool.")
}, 1500);

So, again you are passing a function reference to setTimeout() that can be executed LATER rather than executing it immediately which is what you were doing.

how to call function inside a function with setTimeout

You can pass arguments to function as third argument to setTimeout.

hello("hi");

function hello(a)

{

    hi(a);

    function hi(b)

    {

        console.log(b);

        c = setTimeout(hi, 50,b)

    }

}

How to call a function after all setTimeout functions is done

If you need to call a specific function after the last timeout, I think this will point you in the right direction. Of course, it can be written better, with reusable "class" etc.

function myTimeout(f,t) {

    var p = new Promise(resolve=>{

      setTimeout(()=>{

        resolve(f.apply(this,[]));

    }, t);

    });

    

    //return p.promise(); 

  return p;

}

function first() {

    var numberOfTimeouts = 3

    // code here

    myTimeout(()=>{

        // code here

        console.log('a')

    }, 1000).then(()=>{

      numberOfTimeouts--;

      if (!numberOfTimeouts) second()

    });

    // code here

    myTimeout( function() {

        console.log('b')

    }, 3000).then(()=>{

      numberOfTimeouts--;

      if (!numberOfTimeouts) second()

    });

    // code here

    myTimeout( function() {

       console.log('c')

    }, 3800).then(()=>{

      numberOfTimeouts--;

      if (!numberOfTimeouts) second()

    });

}

function second() {

   console.log('d')

}

first();

calling a function within setTimeout

When you "directly" call callback(), that happens before the timer goes off; it happens before the call to setTimeout() happens.

An expression like

callback(null, number * 2)

is a function call, and as such it's always evaluated when JavaScript needs its value. When it's used in a function call:

setTimeout(callback(null, number * 2), 100);

then it's evaluated in order to get the value that needs to be passed to setTimeout(). It's the same as if you call some function with a simple arithmetic expression:

someFunction(x + y);

You fully expect that what's passed to the function is the sum of x and y. A function call is just another sort of expression, and it too will be fully evaluated when it's used as an argument to a function.

setTimeout in the same function to whom it is calling?

In first example:
Whenever hello method is called it registers a new timer to call hello after 2000ms. So, there will always be single call after 2000ms.

In second example:
Whenever hello is called it registers a new setInterval every time without terminating the previous setInterval which will result in new setInterval getting registered every time and you will get multiple logs on the console which will keep increasing every time hello is called.

function call within setTimeout not executing

That is because these, this inside the callback, does not refer to the object outside.

Try this:

delayFilter() {
    let timeout = null;
    clearTimeout(timeout);
    let self = this;
    timeout = setTimeout(function() {
      self.filterProducts();
    }, 1000);
  }

  filterProducts() {
    //do stuff
  }

You can also try the arrow function. The reason can be seen here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords.

delayFilter() {
    let timeout = null;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      this.filterProducts();
    }, 1000);
  }

  filterProducts() {
    //do stuff
  }

Callback function after setTimeout

When you call setTimeout() a browser callback is registered. It does not mean subsequent statements will also get executed later. They will execute immediately after calling function setTimeout(). Only the function parameter you have passed will be called by setTimeout() when the timeout occurs. So, if the callback needs to be executed after setTimeout() parameterized function. It is better to move that call inside setTimeout() function parameter. So, the code will look like

setTimeout(function() {
    //Your stuff
    callback();
}, 500);