节流防抖：提升前端性能的秘密武器(上)

在这里插入图片描述

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

一、引言
- 介绍节流防抖的概念和重要性
- 为什么需要节流防抖
二、节流防抖的原理
- 解释节流和防抖的基本原理
- 二者的实现方式和应用场景
三、使用 JavaScript 实现节流防抖
- 简单的示例代码

一、引言

介绍节流防抖的概念和重要性

节流防抖是在 JavaScript 中常见的两种技术，用于限制某个函数在短时间内被频繁调用。

节流是指在一定时间内，限制函数的调用次数，即如果函数在指定的时间内被调用，只有第一次调用会被执行，直到下一个指定的时间间隔才会再次执行。

防抖是指在一定时间内，延迟函数的执行，即如果函数在指定的时间内被频繁调用，只会执行最后一次调用，之前的调用都会被取消。

这两种技术的重要性在于它们可以提高应用程序的性能和用户体验。例如，在搜索框输入时，如果每次输入一个字符就发送一个请求到服务器，可能会导致大量不必要的请求，从而降低应用程序的性能。使用节流或防抖技术可以限制请求的频率，减少服务器的负载，并提高用户体验。

另外，节流和防抖技术还可以用于其他场景，例如按钮提交、滚动事件处理等，以避免不必要的操作和提高应用程序的响应能力。

为什么需要节流防抖

需要使用节流防抖的原因有以下几点：

性能优化：在一些场景中，频繁地执行某个函数可能会导致性能问题，例如在浏览器中进行 DOM 操作或发送网络请求。通过使用节流或防抖，可以限制函数的执行频率，减少不必要的计算和资源消耗，从而提高应用程序的性能。
减少冗余操作：有时候，用户可能会在短时间内快速触发同一个事件多次，而实际上只需要最后一次触发的操作被执行。例如，在搜索框中输入文字时，用户可能会连续输入多个字符，但只需要最后输入的内容进行搜索。通过使用节流或防抖，可以避免执行之前的冗余操作，只执行最后一次触发的操作。
提升用户体验：在某些情况下，频繁的操作可能会给用户带来不好的体验，例如在输入框中输入文字时，如果每次输入一个字符就发送一个请求到服务器，可能会导致页面卡顿或响应延迟。通过使用节流或防抖，可以减少这种不必要的操作，提高用户输入的流畅度和响应速度。

综上所述，节流防抖是一种用于优化性能、减少冗余操作和提升用户体验的技术手段，在需要限制某个函数的执行频率或避免短时间内多次触发同一个事件的场景中非常有用。

二、节流防抖的原理

解释节流和防抖的基本原理

节流的基本原理是在指定的时间间隔内，只允许函数被调用一次。如果函数在该时间间隔内被再次调用，那么只有第一次调用会被执行，其他调用都会被忽略。直到时间间隔过去后，才会执行下一次调用。

以下是一个简单的节流示例代码：

function throttle(func, delay) {
  // 使用 flag 来记录上次执行时间
  let flag = true; 

  return function() {
    if (flag) {
      flag = false;
      setTimeout(() => {
        func.apply(this, arguments);
        flag = true;
      }, delay);
    }
  };
}

在上述代码中，throttle 函数接受一个要限制频率的函数 func 和一个时间间隔 delay。它返回一个新的函数，该函数会在每次调用时检查 flag 的状态。如果 flag 为 true，表示上次调用还在时间间隔内，那么本次调用将被忽略。如果 flag 为 false，表示上次调用已经过去了时间间隔，那么会执行 func 函数，并将 flag 设为 true。然后，使用 setTimeout 延迟一段时间后再次将 flag 设为 false，以便下一次调用可以执行。

防抖的基本原理是将多个连续的函数调用合并为一个，只在最后一次调用后执行函数。如果在指定的时间间隔内再次触发事件，之前的延迟操作会被取消，重新开始计时。

以下是一个简单的防抖示例代码：

function debounce(func, delay) {
  let debounceTimer; 

  return function() {
    // 清除之前设置的定时器
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

在上述代码中，debounce 函数接受一个要限制频率的函数 func 和一个时间间隔 delay。它返回一个新的函数，该函数会在每次调用时清除之前设置的定时器，并重新设置一个定时器。只有在定时器到期后，才会执行 func 函数。

通过使用节流和防抖，可以有效地限制某个函数在短时间内被频繁调用，从而提高应用程序的性能和用户体验。

二者的实现方式和应用场景

以下是二者实现方式和应用场景的详细解释：

节流

实现方式：节流通过控制函数在指定的时间间隔内只执行一次来实现。当函数被调用时，它会检查上一次执行的时间，如果距离上次执行时间小于时间间隔，就会忽略本次调用。否则，它会执行函数，并重新开始计时。
应用场景：节流适用于需要限制某个操作执行频率的场景。例如，在搜索框输入时，每次按键都会发送一个请求到服务器进行搜索。使用节流可以将请求合并为每隔一段时间发送一次，避免频繁请求导致的性能问题。

防抖

实现方式：防抖通过延迟函数的执行来实现。当函数被调用时，它会启动一个定时器。如果在定时器到期前函数再次被调用，它会重置定时器并重新开始计时。只有当定时器到期且期间没有再次调用函数时，才会执行函数。
应用场景：防抖适用于需要在用户操作结束后执行某个操作的场景。例如，在提交表单时，用户可能会连续点击提交按钮多次，但只希望最后一次点击提交数据。使用防抖可以确保只有最后一次点击会触发提交操作。

总的来说，节流和防抖都是用于优化性能和用户体验的技术。它们的主要区别在于节流是限制函数的执行频率，而防抖是延迟函数的执行直到用户停止操作。选择使用哪种技术取决于具体的需求和场景。

三、使用 JavaScript 实现节流防抖

简单的示例代码

以下是使用 JavaScript 实现节流防抖的简单示例代码：

节流

// 创建一个节流函数
function throttle(func, delay) {
 // 使用 flag 来记录上次执行时间
 let flag = true; 

 return function() {
 if (flag) {
 flag = false;
 // 使用 setTimeout 延迟执行
 setTimeout(() => {
 func.apply(this, arguments);
 flag = true;
 }, delay);
 }
 }
}

// 创建一个测试函数
const exampleFunction = () => {
 console.log('函数执行!');
}

// 使用节流函数包装测试函数
const throttledFunction = throttle(exampleFunction, 1000);

// 调用节流后的函数
throttledFunction();
throttledFunction();
throttledFunction();

在上述示例中，throttle 函数接受一个要限制频率的函数 func 和一个时间间隔 delay。它返回一个新的函数，该函数会在每次调用时检查 flag 的状态。如果 flag 为 true，表示上次调用还在时间间隔内，那么本次调用将被忽略。如果 flag 为 false，表示上次调用已经过去了时间间隔，那么会执行 func 函数，并将 flag 设为 true。然后，使用 setTimeout 延迟一段时间后再次将 flag 设为 false，以便下一次调用可以执行。

防抖

// 创建一个防抖函数
function debounce(func, delay) {
 let debounceTimer; 

 return function() {
 const context = this;
 const args = arguments; 

 // 清除之前设置的定时器
 clearTimeout(debounceTimer);
 debounceTimer = setTimeout(() => {
 func.apply(context, args);
 }, delay);
 }
}

// 创建一个测试函数
const exampleFunction = () => {
 console.log('函数执行!');
}

// 使用防抖函数包装测试函数
const debouncedFunction = debounce(exampleFunction, 1000);

// 调用防抖后的函数
debouncedFunction();
debouncedFunction();
debouncedFunction();