程序猿面试手册：手写防抖函数，轻松过关

2023-07-13 07:16:26

揭开防抖函数的神秘面纱：性能优化的关键技术

对于经常征战面试的程序员来说，防抖函数早已成为面试官检验技术水平的必杀技。而手写防抖函数，更是一道考察基本功的必考题。今天，我们就来深入剖析一下防抖函数，探究它的原理、应用场景和与节流函数的区别。

防抖函数的奥秘

防抖函数顾名思义，就是让函数在一段时间内只执行一次。它的工作原理类似于一个门卫，在函数被多次触发时，它会检查当前是否有延迟任务正在执行。如果有，它会先取消之前的延迟任务，然后重新启动一个新的延迟任务。这样，函数就会在指定的时间间隔内只执行一次，避免重复调用导致的性能消耗。

防抖函数的实现

要实现一个防抖函数，需要借助 JavaScript 中的 setTimeout() 方法。以下是防抖函数的代码实现：

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

在代码中，当函数被调用时，会先检查 timer 是否存在。如果存在，说明上一次的延迟任务还未执行完毕，此时会先取消该任务。随后，会重新启动一个新的延迟任务，延迟时间为 delay。当延迟时间结束后，函数才会被执行。

防抖函数的应用场景

防抖函数在前端开发中大显身手，常见应用场景包括：

搜索建议框： 当用户在搜索框中输入时，防抖函数可以延迟发送搜索请求，避免多次不必要的请求。
滚动事件处理： 当页面滚动时，防抖函数可以延迟触发滚动事件，避免频繁触发导致的性能问题。
窗口大小改变事件： 当窗口大小发生改变时，防抖函数可以延迟触发窗口大小改变事件，避免频繁触发带来的卡顿。

防抖函数与节流函数的区别

防抖函数和节流函数都是性能优化技术，但两者在工作原理和应用场景上存在差异。

防抖函数： 只执行一次，适合处理用户输入等需要在一段时间内只执行一次的操作。
节流函数： 可以在一段时间内执行多次，适合处理需要连续触发的事件，比如页面滚动、窗口大小改变等。

手写防抖函数的意义

手写防抖函数不仅能帮助你在面试中过关斩将，更重要的是锻炼你的编码能力和对性能优化的理解。通过动手编写防抖函数，你可以深入理解它的原理和实现方式，为后续项目开发中的性能优化奠定坚实基础。

常见问题解答

防抖函数如何实现？
通过使用 setTimeout() 方法，当函数被多次触发时，只保留最后一个延迟任务并执行。
防抖函数的工作原理是什么？
相当于一个门卫，它检查延迟任务是否存在，如果存在则取消，然后重新启动一个新的延迟任务，从而确保函数在一段时间内只执行一次。
防抖函数有哪些应用场景？
搜索建议框、滚动事件处理、窗口大小改变事件处理等。
防抖函数与节流函数的区别？
防抖函数只执行一次，适合处理需要在一段时间内只执行一次的操作；节流函数可以在一段时间内执行多次，适合处理需要连续触发的事件。
手写防抖函数的意义？
锻炼编码能力，加深对性能优化的理解，为项目开发中的性能优化打下基础。