全网最详细最全手写防抖与节流之适合小白

54 阅读2分钟

节流和防抖是前端开发中常用的两种优化性能的技术。

节流是指在一段时间内只执行一次函数,即使在这段时间内多次触发函数也不会执行,常用的场景如滚动、拖拽等事件,可以减少事件的频繁触发,提升页面性能。

防抖是指在一定时间内,多次触发函数,只有最后一次触发时才会执行函数,常用的场景如搜索框、输入框等事件,可以避免频繁的请求或操作,减少不必要的资源浪费。

在实现上,节流可以通过设置定时器来实现,而防抖可以通过清除之前的定时器来实现。两者的目的都是为了减少不必要的函数执行,提高性能,但应根据具体场景选择哪种方式。

接下来看代码,我相信如此详细注释你应该看的懂,我个人建议最好跟着敲一篇才能更好理解

  // 手写防抖函数
function debounce(func, delay) {
  let timer; // 定义定时器变量
  return function () {// 返回一个函数

    const context = this; // 保存函数执行时的上下文
    const args = arguments; // 保存函数执行时的参数

    clearTimeout(timer); // 清除之前的定时器

    timer = setTimeout(() => {
      func.apply(context, args); // 按照指定的时间间隔执行函数

    }, delay);
  }
}

// 使用示例
function handleInput() {
  console.log('输入框输入了');
}

 // 创建一个防抖函数
const debouncedHandleInput = debounce(handleInput, 500);
// 给输入框添加防抖事件
document.querySelector('input').addEventListener('input', debouncedHandleInput); 



// 手写节流函数
function throttle(func, delay) {
  let lastTime = 0; // 记录上一次执行函数的时间

  return function () {  // 返回一个函数

    const context = this;  // 保存函数执行时的上下文

    const args = arguments; // 保存函数执行时的参数

    const nowTime = Date.now(); // 记录当前时间

    if (nowTime - lastTime >= delay) {  // 如果当前时间与上一次执行函数的时间间隔超过指定时间间隔

      func.apply(context, args);   // 执行函数

      lastTime = nowTime; // 更新上一次执行函数的时间

    }
  }
}

// 使用示例
function handleScroll() { console.log('页面滚动了'); }
// 创建一个节流函数
const throttledHandleScroll = throttle(handleScroll, 500);
// 给页面添加节流事件
document.addEventListener('scroll', throttledHandleScroll);