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

使用lambda：

$opts = array(
    'maxTargets' => 1,
    'roots' => array( .... ),
);

或绑定函数

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

任何一种解决方案都应该起作用

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

Answer 3

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

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

3 个答案: