防抖和节流的使用

1.防抖和节流的概念

先说一下防抖和节流的概念

1.1 防抖

• 防抖技术会延迟函数的执行，直到最后一次触发事件后的一段时间内没有新的触发。
• 如果在这段时间内又有新的触发，则会重新计时，确保只有在事件停止触发后的指定时间内才执行一次函数。

1.2 节流

• 节流技术确保在一定时间间隔内，无论事件如何频繁触发，函数至多只执行一次。
• 它通过设定一个固定的时间间隔，在该时间间隔内只执行一次事件处理函数。

2.防抖和节流的使用场景

2.1 防抖

• 搜索框输入：当用户停止输入一段时间后才发送搜索请求，避免频繁的网络请求。
• 按钮点击：防止用户点击按钮过快导致多次提交表单。
• 窗口大小调整：在调整浏览器窗口大小时，减少resize事件的触发次数，避免频繁计算。

2.2 节流

• 滚动加载：在用户滚动页面时，限制滚动事件的执行频率，避免性能问题。
• 窗口大小调整：同样可以用于调整窗口大小时减少resize事件的触发次数。
• 实时数据更新：在某些实时数据更新场景中，确保数据更新不会过于频繁。

3.手动写防抖和节流

3.1 防抖 (使用setTimeout和clearTimeout来实现防抖功能)

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

3.2 节流（使用定时器实现节流功能)

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

4.使用插件实现防抖和节流

除了上面介绍的手写防抖和节流的方法，我们还可以使用lodash插件来实现实现防抖和节流功能，以下是使用 lodash 实现防抖和节流的基本步骤:

4.1 安装lodash:

• 使用 npm 安装 lodash：npm install lodash --save
• 使用 yarn 安装 lodash：yarn add lodash

4.2 引入 lodash：在你的 JavaScript 文件中引入 lodash：import _ from 'lodash';

4.3 使用防抖函数：

_.debounce 是 lodash 提供的防抖函数。你可以将需要防抖的函数和延迟时间作为参数传递给 _.debounce，它将返回一个防抖后的函数。

function search() {
  console.log('去请求接口');
  // 这里可以放置你的搜索请求代码
}

const debouncedSearch = _.debounce(search, 2000);

// 假设你有一个输入框
const input = document.querySelector('input');
input.addEventListener('input', debouncedSearch);

4.3 使用节流函数：

_.throttle 是 lodash 提供的节流函数。你可以将需要节流的函数和节流间隔作为参数传递给 _.throttle，它将返回一个节流后的函数。

function logClick() {
  console.log('点击事件被触发');
}

const throttledClick = _.throttle(logClick, 3000);

// 假设你有一个按钮
const button = document.querySelector('button');
button.addEventListener('click', throttledClick);

以上就是防抖和节流手动和插件两种使用方法和介绍啦，Jenna很乐意给友友们做问题解答，希望我们的思维能碰撞出技术的火花~