如何在 Polymer 延迟时正确地将函数范围限定为运行？

Question

我正在尝试将输入数据添加到最后一次击键后延迟 2 秒的数组中。但是，当我运行时，出现以下错误：Uncaught TypeError: this._validateInput is not a function

我怎样才能正确地将 this._validateInput() 范围延迟到运行？

我试过 let func = this._validateInput();，但每次设置 func 时似乎运行函数。

此外，on-change 输入处理程序仅在输入失去焦点时触发。

正在寻找解决此问题...

<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

this 关键字始终引用当前作用域的 this，它会在您将某些内容包装在 function() { ... }

中时发生变化

您需要将外部作用域中的 this 分配给一个变量。

var self = this;
timeout = setTimeout(function () {
  self._validateInput();
}, 2000);

参考：setTimeout scope issue

Answer 2

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

...

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

_validateInput () {
  if(this.$.itemId.value) {
    // do something
  }
}

Answer 3

要么使用 lambda：

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

或绑定函数

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

任一解决方案都应该有效

lambda 起作用是因为它没有自己的作用域。绑定有效，因为它应用范围 "before" 运行可以这么说

如何在 Polymer 延迟时正确地将函数范围限定为运行？

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

javascript

delay

polymer

如何在 Polymer 延迟时正确地将函数范围限定为 运行？

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

javascript

delay

polymer

如何在 Polymer 延迟时正确地将函数范围限定为运行？