防抖函数和节流函数js

防抖函数和节流函数是常用于优化前端性能的工具函数。

防抖函数（Debounce）的作用是在事件触发后等待一段时间，如果在等待时间内再次触发了事件，就重新计时。只有在等待时间内没有再次触发事件，才会执行函数。

下面是使用 JavaScript 编写防抖函数的示例代码：

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

使用方式示例：

function handleSearch() {
  // 处理搜索逻辑
}

const debouncedHandleSearch = debounce(handleSearch, 300);

input.addEventListener('keyup', debouncedHandleSearch);

节流函数（Throttle）的作用是在一段时间内只执行一次函数。在该时间段内再次触发事件，函数不会被执行。

下面是使用 JavaScript 编写节流函数的示例代码：

function throttle(func, limit) {
  let inThrottle;
  return function() {
    const context = this;
    const args = arguments;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(function() {
        inThrottle = false;
      }, limit);
    }
  };
}

使用方式示例：

function handleScroll() {
  // 处理滚动事件
}

const throttledHandleScroll = throttle(handleScroll, 300);

window.addEventListener('scroll', throttledHandleScroll);

以上就是使用 JavaScript 编写防抖函数和节流函数的示例代码。根据实际需求和场景选择适合的函数使用。