每天一道题：深度理解函数节流与防抖，优化网页体验

前端

2023-09-14 02:59:46

前言

在当今快节奏的数字世界中，网页性能和用户体验已成为衡量网站成功与否的关键指标。为了满足用户对快速、流畅和响应式网页的需求，前端开发人员不断寻求优化网页性能的方法。函数节流和函数防抖便是其中两种重要的技术。

函数节流：限制执行频率，提升性能

函数节流是一种限制函数执行频率的技术，它通过在指定的时间间隔内只允许函数执行一次，从而防止因频繁调用而导致的性能问题。这在处理诸如滚动、调整窗口大小或键盘输入等事件时尤其有用。

原理

函数节流的原理很简单，它通过设置一个计时器来控制函数的执行。当函数被调用时，计时器会启动。如果计时器已经启动，则函数不会被立即执行，而是等待计时器到期后再执行。这样就可以确保函数在指定的时间间隔内只执行一次。

应用场景

函数节流通常用于处理高频事件，例如：

滚动事件：在滚动网页时，频繁触发滚动事件可能会导致性能问题。使用函数节流可以限制滚动事件的触发频率，从而减轻浏览器的负担。
调整窗口大小事件：当用户调整浏览器窗口大小时，会触发调整窗口大小事件。频繁触发此事件也可能会导致性能问题。使用函数节流可以限制调整窗口大小事件的触发频率，从而优化网页的响应速度。
键盘输入事件：在用户输入时，会触发键盘输入事件。频繁触发此事件也可能会导致性能问题。使用函数节流可以限制键盘输入事件的触发频率，从而提高网页的响应速度。

代码示例

// 定义一个函数节流函数
function throttle(func, wait) {
  let timer = null;

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

// 使用函数节流来处理滚动事件
window.addEventListener('scroll', throttle(function () {
  // 在这里执行滚动事件处理逻辑
}, 200));

函数防抖：延迟执行，避免重复调用

函数防抖是一种延迟函数执行的技术，它通过在一定的时间间隔内只允许函数执行一次，从而避免因重复调用而导致的性能问题和不必要的操作。这在处理诸如搜索、表单提交或按钮点击等事件时尤其有用。

原理

函数防抖的原理也很简单，它通过设置一个计时器来控制函数的执行。当函数被调用时，计时器会启动。如果计时器已经启动，则函数不会被立即执行，而是等待计时器到期后再执行。这样就可以确保函数在一定的时间间隔内只执行一次。

应用场景

函数防抖通常用于处理用户交互事件，例如：

搜索事件：在用户输入搜索框时，频繁触发搜索事件可能会导致性能问题和不必要的搜索请求。使用函数防抖可以延迟搜索事件的触发，从而避免因重复输入而导致的性能问题和不必要的搜索请求。
表单提交事件：在用户提交表单时，频繁触发表单提交事件可能会导致性能问题和不必要的操作。使用函数防抖可以延迟表单提交事件的触发，从而避免因重复提交而导致的性能问题和不必要的操作。
按钮点击事件：在用户点击按钮时，频繁触发按钮点击事件可能会导致性能问题和不必要的操作。使用函数防抖可以延迟按钮点击事件的触发，从而避免因重复点击而导致的性能问题和不必要的操作。

代码示例

// 定义一个函数防抖函数
function debounce(func, wait) {
  let timer = null;

  return function (...args) {
    if (timer) {
      clearTimeout(timer);
    }

    timer = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

// 使用函数防抖来处理搜索事件
const searchInput = document.getElementById('search-input');

searchInput.addEventListener('input', debounce(function () {
  // 在这里执行搜索事件处理逻辑
}, 500));

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

虽然函数节流和函数防抖都是用来优化网页性能的技术，但它们之间还是存在一些区别的。

执行时机： 函数节流在指定的时间间隔内只允许函数执行一次，而函数防抖在一定的时间间隔内只允许函数执行一次。
应用场景： 函数节流通常用于处理高频事件，如滚动、调整窗口大小或键盘输入等事件，而函数防抖通常用于处理用户交互事件，如搜索、表单提交或按钮点击等事件。
目的： 函数节流的目的是限制函数的执行频率，从而防止因频繁调用而导致的性能问题，而函数防抖的目的是延迟函数的执行，从而避免因重复调用而导致的性能问题和不必要的操作。