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

你需要的是去抖功能。您的代码主要位于此处，只需将超时变量移出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这样的东西，它已随附了这样的助手。

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

1 个答案: