给面试官留下深刻印象：“手写下防抖节流”

2023-07-11 10:19:19

防抖节流：留下持久面试印象的利器

什么是防抖节流？

防抖节流是前端面试中的一个常见话题，也是展示你技能并给面试官留下深刻印象的关键技术。它是一种函数优化技术，用于防止函数在短时间内被多次调用。想象一下你在使用搜索引擎搜索歌曲，每次输入一个字母就会触发一次搜索请求。这对服务器来说既浪费又低效。防抖节流通过延迟函数的执行来解决这个问题，确保它仅在一定时间后执行一次。

防抖与节流的异同

防抖和节流都属于函数优化技术，但略有不同。防抖会在一段时间后只执行一次函数，而节流会在特定的时间间隔内只执行一次函数。如果某项操作需要立即执行，例如在文本输入时进行即时搜索，防抖是不合适的。在这种情况下，节流是更好的选择，因为它允许函数在指定时间内执行一次。

防抖节流的应用场景

防抖节流在各种场景中都有应用，以下是一些常见的例子：

输入框：延迟搜索请求，直到用户停止输入。
滚动事件：在用户停止滚动后触发事件，优化页面性能。
按钮点击：防止按钮在短时间内被多次点击，防止意外操作。
窗口大小调整：延迟窗口大小调整事件，直到用户停止调整大小。

防抖节流的实现

实现防抖节流有多种方法，其中使用计时器是最常用的。当一个函数被防抖处理后，它会创建一个计时器。如果在计时器到期之前函数再次被调用，计时器将被重置，函数将不会被执行。只有当计时器到期时，函数才会被执行。

面试题解惑

1. 什么是防抖节流？
2. 防抖节流有什么作用？
3. 如何实现防抖节流？
4. 防抖节流的优缺点是什么？
5. 什么情况下需要使用防抖节流？

防抖节流代码示例

JavaScript：

const debounce = (func, delay) => {
  let timerId;
  return (...args) => {
    if (timerId) {
      clearTimeout(timerId);
    }
    timerId = setTimeout(() => {
      func(...args);
      timerId = null;
    }, delay);
  };
};

Python：

import time

def debounce(func, delay):
  def wrapper(*args, **kwargs):
    def delayed():
      func(*args, **kwargs)
    timer = time.time() + delay
    while time.time() < timer:
      time.sleep(0.1)
    delayed()
  return wrapper