技术解密：防抖节流的本质和区别

前端

2024-02-11 22:37:08

防抖与节流：不可或缺的前端利器

引言

在现代网页开发中，流畅的用户交互和高效的页面性能至关重要。防抖和节流技术应运而生，成为不可或缺的工具，帮助开发者打造响应灵敏、体验出色的网页应用。

防抖：掌控函数调用频率

想象一下，你正在使用搜索框输入查询。每次你敲击键盘，都会触发一个函数去搜索结果。如果不加以控制，服务器将被频繁查询，导致页面卡顿和用户体验不佳。这就是防抖派上用场的地方。

防抖的核心思想是，在指定时间间隔内，只允许函数执行一次。这样，当用户在搜索框中输入时，函数不会每次敲击都执行，而是在一段时间间隔后才执行一次，有效减少了服务器查询的频率，提升了搜索体验。

节流：确保函数固定频率执行

与防抖不同，节流的目的是确保函数以固定的频率执行。想象一下，你正在播放一段视频。为了保证视频播放流畅，需要以恒定的速度更新帧。如果没有节流，每当播放器接收到新的帧时，函数都会执行，导致视频播放不稳定，甚至卡顿。

节流通过限制函数在指定时间间隔内的执行次数，来确保视频以稳定的速度播放。这样，无论播放器接收到多少个新帧，函数只会在设定的时间间隔内执行一次，从而保证视频播放的流畅性。

防抖与节流的区别

虽然防抖和节流都是函数调用控制技术，但它们在实现方式和适用场景上有所不同：

防抖： 允许函数在指定时间间隔内执行一次，即使多次调用也只执行一次。适用于需要限制函数调用频率的场景，如搜索框输入、滚动事件处理和窗口调整事件处理。
节流： 允许函数在指定时间间隔内执行任意多次，但只允许一次生效。适用于需要确保函数按固定频率执行的场景，如动画效果、视频播放和网络请求。

在 JavaScript 中实现防抖和节流

在 JavaScript 中，实现防抖和节流非常简单。以下是一段代码示例：

// 防抖函数
const debounce = (func, delay) => {
  let timer = null;
  return (...args) => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
};

// 节流函数
const throttle = (func, delay) => {
  let lastCallTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCallTime > delay) {
      func.apply(this, args);
      lastCallTime = now;
    }
  };
};