如何防止超时功能运行两次

Question

我试图将数据从输入字段自动传递到一个函数中，如果1000毫秒后未输入新数据。但是，它的行为是不一致的，有时该功能在单个输入上运行两次。

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

...

 automaticInput() {
   let timeout = null;
   let that = this;
   console.log(timeout); // logging each keystroke
   input();
   function input() {
     console.log('input');
     clearTimeout(timeout);
     timeout = setTimeout(function() {
       that.validateInput();
     }, 1000);
   }
 }
validateInput() {
  if (this.$.itemId.value) {
    this.doSomething(); // runs twice
  }
}

如何将自动输入函数正确设置为每个输入字符串仅运行一次？

Answer 1

您需要的是debounce函数。您的代码主要在这里，只需将超时var移出 automaticInput：

let timeout = null;
automaticInput() {
  clearTimeout(timeout);
  let that = this;
  timeout = setTimeout(function() {
    that.validateInput();
  }, 1000);
}

或更好地创建Debounce fn喜欢：

function debounce(fn, timeout = 0) {
   let timeoutId = null; 
   return (...args) => {
       clearTimeout(timeoutId);
       timeoutId = setTimeout(() => fn(...args), timeout);
   }
} 

然后您的代码变为：

const debouncedValidateInput = debounce(this.validateInput.bind(this), 1000);

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

如果您使用诸如lodash之类的东西，它已经使用了这样的助手。