javascript - Debounce 功能在 keyup 时立即触发，而是必须在一秒钟后触发

Question

我正在尝试实现自定义去抖动功能，该功能必须在一秒钟延迟后（在用户停止输入后）提醒用户在文本框中输入的任何数据。我究竟做错了什么？它立即用单个字符触发 alert()。

function debounce(func, timeout) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, timeout);
  };
}

function saveInput(args) {
  alert(args); //This triggers immediately
}
const processChange = (event) => {
  debounce(saveInput(event.target.value), 1000);
}

<input type="text" onkeyup="processChange(event)" />

你们能建议我在这里错过什么吗？

标签： javascriptcallbacksettimeoutdebouncedebouncing

Answer 1

这对我有用。但是 myInput 在这里是一个全局变量。

function debounce(callback, delay) {
        let timeout;
        return function () {
            clearTimeout(timeout);
            timeout = setTimeout(callback, delay);
        }
    }

    const myInput = document.getElementById("myInput");

    function helloInput() {
        alert(myInput.value); 
    }

    myInput.addEventListener(
        "keyup",
        debounce(helloInput, 1000)
    );

    myInput.focus();

<input type="text" id="myInput" />