前端防抖实现

在前端开发中,接口防抖(Debouncing)是一种减少频繁触发接口请求的技术,特别适用于用户输入、滚动事件、窗口调整大小等场景。防抖的核心思想是在事件触发后等待一定的延迟时间,如果在这段延迟时间内事件又被重新触发,则重新开始计算延迟时间。只有当指定的时间间隔内没有再次触发事件时,才执行相应的操作。

以下是实现接口防抖的几种方法:

1. 使用lodash库的debounce函数

lodash是一个常用的JavaScript工具库,提供了debounce函数来实现防抖功能。

复制代码
// 引入lodash的debounce函数
import _ from 'lodash';

// 创建一个防抖函数
const debouncedFunction = _.debounce(function() {
  // 这里是你的接口请求逻辑
  console.log('接口请求被触发');
}, 1000); // 1000毫秒的延迟时间

// 使用防抖函数
window.addEventListener('resize', debouncedFunction);

2. 手动实现debounce函数

如果你不想引入额外的库,可以自己实现一个debounce函数:

复制代码
function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this, args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

// 使用防抖函数
const myDebouncedFunction = debounce(function() {
  console.log('接口请求被触发');
}, 1000);

window.addEventListener('resize', myDebouncedFunction);

3. 使用async/await和Promise实现

复制代码
let timeout = null;

function debounceAsync(func, wait) {
  return async function(...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(async () => {
      await func.apply(context, args);
    }, wait);
  };
}

// 使用防抖函数
const myDebouncedFunctionAsync = debounceAsync(async () => {
  console.log('接口请求被触发');
}, 1000);

window.addEventListener('resize', () => myDebouncedFunctionAsync());

4. 使用requestAnimationFrame实现

对于某些场景,如窗口调整大小或滚动事件,可以使用requestAnimationFrame来实现防抖:

复制代码
let frame = null;

function debounceRAF(func) {
  return function(...args) {
    if (frame !== null) {
      cancelAnimationFrame(frame);
    }
    frame = requestAnimationFrame(() => {
      func.apply(this, args);
    });
  };
}

// 使用防抖函数
const myDebouncedFunctionRAF = debounceRAF(function() {
  console.log('接口请求被触发');
});

window.addEventListener('resize', myDebouncedFunctionRAF);

选择哪种方法取决于你的具体需求和场景。lodashdebounce函数是最简单直接的方法,而手动实现可以给你更多的控制权。对于需要高性能的场景,requestAnimationFrame可能是一个更好的选择。

相关推荐
Cacciatore->4 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~6 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo7 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末26 分钟前
React——基础
前端·react.js·前端框架
aklry37 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin931 小时前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子1 小时前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户3802258598241 小时前
使用three.js实现3D地球
前端·three.js
程序无bug1 小时前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo1 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos