面试必备：节流和防抖，提升前端开发体验

前端

2024-02-12 01:19:53

前言

在前端开发中，我们经常会遇到一些需要频繁触发的事件，例如滚动、点击、输入等。如果我们对这些事件不做任何处理，就会导致大量的函数调用，从而影响网站的性能和用户体验。

节流和防抖是两种常用的技术，可以有效解决这个问题。节流可以限制函数的调用频率，而防抖可以延迟函数的执行，直到事件停止触发。

节流

原理

节流的原理是，在一定的时间间隔内，只允许函数执行一次。如果在时间间隔内函数被多次调用，则只执行最后一次调用。

实现

实现节流的方法有很多，其中最简单的一种是使用定时器。

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

在上面的代码中，func是要节流的函数，wait是节流的时间间隔。

当函数被调用时，首先检查timer是否为null。如果timer为null，则说明当前没有正在执行的定时器，此时可以立即执行函数。

如果timer不为null，则说明当前正在执行一个定时器，此时不会执行函数，而是将函数的执行延迟到定时器结束之后。

应用场景

节流可以应用于各种场景，例如：

滚动事件：当用户滚动页面时，可以节流滚动事件的触发频率，以避免对页面造成过多的重绘和重排。
点击事件：当用户点击按钮或链接时，可以节流点击事件的触发频率，以避免对服务器造成过多的请求。
输入事件：当用户在输入框中输入内容时，可以节流输入事件的触发频率，以避免对服务器造成过多的请求。

防抖

原理

防抖的原理是，当事件触发时，先不执行函数，而是延迟一段时间再执行。如果在延迟时间内事件再次触发，则重新计时。

实现

实现防抖的方法有很多，其中最简单的一种是使用定时器。

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

在上面的代码中，func是要防抖的函数，wait是防抖的时间间隔。

当函数被调用时，首先检查timer是否为null。如果timer为null，则说明当前没有正在执行的定时器，此时可以立即执行函数。

如果timer不为null，则说明当前正在执行一个定时器，此时不会执行函数，而是将函数的执行延迟到定时器结束之后。