前言

在前端开发中，为了提高性能和用户体验，我们常常会用到两个概念点：防抖和节流。

防抖

防抖原理

用于限制函数在短时间内的多次调用，只执行最后一次调用。它通常用于处理用户输入或其他触发频繁事件的情况，以避免过多的函数调用和性能开销。

防抖应用场景

• 搜索框输入：当用户在搜索框中输入时，通常会触发一个搜索请求。为了避免频繁发送请求，可以使用防抖技术，将搜索请求延迟到用户停止输入或停顿一定时间后再发送。

• 窗口大小调整：当用户调整窗口大小时，可能会触发一些布局或样式的更新。通过防抖技术，可以将这些更新操作延迟到用户停止调整窗口大小或停顿一定时间后再执行。

• 按钮提交：用户连续点击提交按钮，造成多次提交。防抖限制连续点击。防止表单多次提交，避免数据混乱。

手写代码防抖函数

function debounce(func, delay) {
  let timerId;
  return function (...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

节流

节流原理

用于限制函数的执行频率。它通常用于处理频繁触发的事件，以避免过多的函数调用和性能开销。

节流应用场景

• 滚动事件：当用户滚动页面时，可能会触发一些操作，比如加载更多内容或懒加载图片。通过防抖技术，可以将这些操作延迟到用户停止滚动或停顿一定时间后再执行。

• 在线拖拽：拖拽时位置计算过于频繁，造成性能瓶颈。控制位置计算的频率。拖拽操作流畅，减少性能消耗。

• 点赞收藏：当用户点赞或收藏时，你可以使用节流技术来限制触发这些操作的频率。这样可以避免过多的请求或更新，从而提高页面性能。

手写代码节流函数

function throttle(func, delay) {
  let lastCallTime = 0;
  return function (...args) {
    const currentTime = Date.now();
    if (currentTime - lastCallTime >= delay) {
      lastCallTime = currentTime;
      func.apply(this, args);
    }
  };
}