如何防止超時功能兩次運行

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

如何正確設置automaticInput函數以使每個輸入字符串僅運行一次？

Answer 1

您需要的是一個反跳功能。 您的代碼大部分位於此處，只需將timeout var從automaticInput移出：

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

或更好地創建去抖動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之類的lodash則該工具已隨附此類幫助器。