How to properly scope function to run on delay in Polymer?

Question

I am trying to add the input data into an array delayed for 2 seconds after the last keystroke. However, when I run this I get the following error: Uncaught TypeError: this._validateInput is not a function

How can I properly scope this._validateInput() to run on delay?

I tried let func = this._validateInput();, but that seems to run the function every time that func is set.

Also, the on-change input handler only fires when the input loses focus.

Looking for away to solve this...

<paper-input id="itemId" on-input="_autoAddToArray"></paper-input>

...

_validateInput () {
    console.log('validate input');
}

_autoAddToArray () {
  let timeout = null;
  clearTimeout(timeout);
  timeout = setTimeout(function () {
    this._validateInput();
  }, 2000);
}

Answer 1

Either use a lambda:

setTimeout(
    () => this._validateInput(),
    2000
);

or bind the function

setTimeout(this._validateInput.bind(this), 2000);

Either solution should work

---

The lambda works because it doesn't have its own scope. The binding works because it applies the scope "before" running it so to speak