防抖和节流的实现原理

防抖节流是前端开发中常用的优化性能的技巧，能够有效地减少重复的代码执行和请求发送，提升用户体验和页面性能。本文将详细介绍防抖节流的概念、应用场景和实现方法，并结合实例进行讲解

一、防抖

防抖的原理是在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。防抖的主要作用是避免重复操作造成的资源浪费和性能降低，例如频繁地点击按钮或者输入框输入时请求数据，导致服务器压力过大或页面响应延迟等问题。下面是一个简单的防抖示例：

function debounce(func, wait) {
  let timeout = null;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, arguments);
    }, wait);
  }
}

// 使用方法
const debouncedFn = debounce(() => {
  // 执行的操作
}, 1000);

// 触发事件
document.addEventListener('scroll', debouncedFn);

在上述代码中，debounce函数接收两个参数：func表示需要执行的函数，wait表示等待时间。timeout变量保存一个定时器，每次执行时清除上一次的定时器，重新设定一个新的定时器，并在wait秒后执行函数。

二、节流

节流的原理是每隔一定时间间隔执行一次回调函数，适用于在一定时间间隔内，执行回调函数的次数受到限制的场景，例如窗口滚动时执行函数，限制函数的执行频率，减少浏览器的负担。下面是一个简单的节流示例：

function throttle(func, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  }
}

// 使用方法
const throttledFn = throttle(() => {
  // 执行的操作
}, 1000);

// 触发事件
document.addEventListener('scroll', throttledFn);

在上述代码中，throttle函数接收两个参数：func表示需要执行的函数，delay表示时间间隔。如果定时器不存在，则设置一个定时器，并在delay时间后执行函数，否则忽略这次触发。