揭秘“面试官：手写一个防抖”背后的技术秘密

前端

2022-11-01 18:36:09

防抖和节流：前端开发中的必备优化技巧

简介

在前端开发中，防抖和节流是两个至关重要的优化技术，可以显著提升代码质量和性能。掌握这两个概念，将使你成为一名出色的面试官眼中的技术高手。

什么是防抖和节流？

防抖是一种函数优化技术，可以防止函数在短时间内被多次触发。它的工作原理是创建一个延迟函数，在事件触发后的一段时间内，如果事件再次触发，则取消前一个延迟函数，并重新创建一个新的延迟函数。当延迟时间到期时，执行延迟函数。

节流是一种函数优化技术，可以限制函数在一定时间内只被触发一次。它的工作原理是创建一个计时器，在事件触发后，计时器开始计时。如果在计时器到期之前，事件再次触发，则重置计时器。当计时器到期时，执行函数。

应用场景

防抖和节流广泛应用于各种场景：

防抖： 处理用户输入事件，例如，在用户输入搜索框时，防抖可以防止搜索函数在用户每次输入字符时都被触发。
节流： 处理需要在一定时间内只执行一次的事件，例如，在页面滚动时，节流可以防止滚动事件在用户每次滚动页面时都被触发。

代码实现

防抖和节流的代码实现非常简单：

防抖：

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

节流：

function throttle(func, delay) {
  let timer;
  return function (...args) {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, delay);
    }
  };
}

优缺点对比

特性	防抖	节流
原理	创建延迟函数	创建计时器
适用场景	防止函数多次触发	限制函数触发次数
延迟触发	是	否
取消触发	支持	不支持
优点	提高性能	提高性能、减少资源浪费
缺点	可能导致延迟执行	可能导致延迟执行