如何在Polymer中延迟运行功能？

Posted 2021-04-12

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

我怎样才能正确地确定this._validateInput()的延迟时间？

我尝试了let func = this._validateInput();，但是每次设置func时似乎都会运行该函数。

此外，变更输入处理程序仅在输入失去焦点时触发。

寻找解决这个问题......

<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);
}

答案

使用lambda：

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

或绑定功能

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

两种解决方案都应该有效

---

lambda有效，因为它没有自己的范围。绑定有效，因为它可以“运行”之前应用范围

另一答案

this关键字总是指当前范围的this，它会在您在function（）{...}中包装内容时随时更改

您需要将外部范围中的this分配给变量。

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

参考：setTimeout scope issue

另一答案

<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
  }
}