js实现防抖函数,输入框持续输入打印最终的值

好的，以下是一个简单的防抖函数的实现：

function debounce(func, delay) {
  let timerId;
  return function() {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

这个函数接受两个参数，第一个是要执行的函数，第二个是防抖的延迟时间。它会返回一个新的函数，这个新函数在被调用时会清除之前的计时器，然后再设置一个新的计时器。如果在延迟时间内再次调用这个新函数，就会清除之前的计时器并再次设置新的计时器。只有在延迟时间内没有再次调用这个新函数时，才会执行原来传入的函数。

下面是一个例子，展示如何使用上面的防抖函数来打印输入框的最终值：

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

<script>
const input = document.querySelector('#input');
const printValue = debounce((event) => {
  console.log(event.target.value);
}, 500);

input.addEventListener('input', printValue);
</script>

在这个例子中，我们创建了一个输入框和一个防抖函数 `printValue`。将 `printValue` 作为 `input` 元素的 `input` 事件的监听函数，当用户在输入框中输入时，会触发 `input` 事件，然后 `printValue` 函数会被调用。但是因为 `printValue` 是一个防抖函数，所以只有在用户停止输入500毫秒后，才会真正打印输入框中的最终值。