前端防抖实现

在前端开发中,接口防抖(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可能是一个更好的选择。

相关推荐
LuckySusu1 分钟前
【vue篇】Vue 响应式核心:依赖收集机制深度解密
前端·vue.js
LuckySusu2 分钟前
【vue篇】Vue.js 2025:为何全球开发者都在拥抱这个前端框架?
前端·vue.js
LuckySusu4 分钟前
【vue篇】Vue 单向数据流铁律:子组件为何不能直接修改父组件数据?
前端·vue.js
LuckySusu6 分钟前
【vue篇】React vs Vue:2025 前端双雄终极对比
前端·vue.js
李鸿耀33 分钟前
仅用几行 CSS,实现优雅的渐变边框效果
前端
码事漫谈1 小时前
解决 Anki 启动器下载错误的完整指南
前端
im_AMBER1 小时前
Web 开发 27
前端·javascript·笔记·后端·学习·web
蓝胖子的多啦A梦2 小时前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
玩代码2 小时前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
訾博ZiBo2 小时前
React 状态管理中的循环更新陷阱与解决方案
前端