前端防抖实现

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

相关推荐
江拥羡橙1 小时前
Vue和React怎么选?全面比对
前端·vue.js·react.js
楼田莉子3 小时前
Qt开发学习——QtCreator深度介绍/程序运行/开发规范/对象树
开发语言·前端·c++·qt·学习
暮之沧蓝3 小时前
Vue总结
前端·javascript·vue.js
木易 士心4 小时前
Promise深度解析:前端异步编程的核心
前端·javascript
im_AMBER4 小时前
Web 开发 21
前端·学习
又是忙碌的一天4 小时前
前端学习day01
前端·学习·html
Joker Zxc4 小时前
【前端基础】20、CSS属性——transform、translate、transition
前端·css
excel4 小时前
深入解析 Vue 3 源码:computed 的底层实现原理
前端·javascript·vue.js
大前端helloworld4 小时前
前端梳理体系从常问问题去完善-框架篇(react生态)
前端
不会算法的小灰5 小时前
HTML简单入门—— 基础标签与路径解析
前端·算法·html