前端面试必刷手写题：深入理解防抖和节流

2024-01-25 03:31:49

前端面试必刷手写题系列 [2]：防抖和节流

在前端面试中，手写代码题是考察候选人编程能力和对基础概念理解程度的重要环节。其中，防抖和节流是两个经常出现的面试题。本篇博客将深入浅出地解析防抖和节流的概念、实现方式以及应用场景，帮助大家轻松掌握这些必刷手写题。

核心概念

防抖

防抖是一种优化技术，其核心思想是将多次连续触发的函数调用合并为一次。例如，在滚动事件中，如果我们希望在用户停止滚动后才执行某个操作，则可以使用防抖函数。通过设置一个时间间隔，防抖函数会忽略在此时间间隔内连续触发的函数调用，只执行最后一次调用。

节流

节流也是一种优化技术，但其与防抖不同。节流函数会保证在指定时间间隔内只执行一次函数。也就是说，如果在时间间隔内连续触发函数调用，节流函数只执行第一次调用，而忽略后续调用。

实现方式

JavaScript 实现

在 JavaScript 中，我们可以使用 setTimeout() 函数实现防抖和节流。

防抖

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

节流

function throttle(fn, delay) {
  let flag = true;
  return function () {
    const args = arguments;
    if (flag) {
      fn.apply(this, args);
      flag = false;
      setTimeout(() => {
        flag = true;
      }, delay);
    }
  };
}