function call within setTimeout not executing

Question

I am executing the function delayFilter() on keyup of an input box. I want to delay 1 second after the user stops typing and run the function filterProducts(). However, when executing filterProducts() inside of the setTimeout I get the console error "this.filterProducts is not a function". This function gets called fine when outside of the setTimeout. Why is this error being thrown?

  delayFilter() {
    let timeout = null;
    clearTimeout(timeout);

    timeout = setTimeout(function() {
      this.filterProducts();
    }, 1000);
  }

  filterProducts() {
    //do stuff
  }

Using clearTimeout directly after overwriting your refernce to the timeout (timeout = null) isn't going to have the desired effect. — DBS
– DBS, Commented Sep 2, 2020 at 16:13
Does this answer your question? Pass correct "this" context to setTimeout callback? — tevemadar
– tevemadar, Commented Sep 2, 2020 at 16:17

Athanasios Kataras · Accepted Answer · 2020-09-02 16:17:53Z

4

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
  }

edited Sep 2, 2020 at 16:17

answered Sep 2, 2020 at 16:12

Athanasios Kataras

26.7k6 gold badges40 silver badges67 bronze badges

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

Comments

Brenden · Accepted Answer · 2020-09-02 16:26:49Z

1

You need to bind the scope of the function in the setTimeout callback. the easiest way is to use arrow functions, if your platform supports it.

timeout = setTimeout(() => this.filterProducts(), 1000);

you can also save the scope in a variable.

var self = this;
timeout = setTimeout(funciton() { self.filterProducts() }, 1000);

Alternatively you can manually bind it. This is useful if you want to pass the function around.

timeout = setTimeout(function() {...}.bind(this), 1000);

edited Sep 2, 2020 at 16:26

answered Sep 2, 2020 at 16:14

Brenden

2,0971 gold badge13 silver badges10 bronze badges

Collectives™ on Stack Overflow

function call within setTimeout not executing

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related