用JavaScript写一个防抖函数

防抖函数是指在调用函数后，不立即执行该函数，而是等待一定时间后再执行，如果在等待时间内再次调用该函数，则重新计时，直到等待时间结束才执行该函数。这个函数常用于防止频繁触发事件而导致的性能问题，如输入框的自动搜索。

下面是一个简单的防抖函数的实现，其中fn参数是要执行的函数，delay参数是等待时间（单位为毫秒）：

function debounce(fn, delay) {
  let timer = null;
  return function() {
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

使用该函数时，将要执行的函数作为参数传入，然后将返回的函数作为事件的回调函数，这样就可以实现防抖效果了。例如：

const searchInput = document.querySelector('#search-input');

function search() {
  // 查询操作...
}

const debouncedSearch = debounce(search, 500);

searchInput.addEventListener('input', debouncedSearch);

在这个例子中，当用户输入内容时，会触发input事件，然后调用debouncedSearch函数，如果在500毫秒内再次输入内容，则重新计时，直到500毫秒后才执行search函数。这样就可以避免频繁查询数据库，提高页面性能。