网站首页 > 技术文章 正文
防抖(debounce)是一种在前端开发中用于减少事件处理器被频繁调用的技术。当一个事件(例如鼠标点击事件)在短时间内被多次触发时,防抖会让事件处理器只执行一次,而不是多次执行。这在处理像输入框实时搜索、窗口大小调整等场景时非常有用,因为它可以避免处理器被频繁调用,从而影响性能。
举一个输入框实时搜索的例子:假设我们要实现一个输入框实时搜索的功能,当用户在输入框中输入文字时,会触发一个搜索事件。如果没有防抖,处理器会被频繁调用,导致性能问题。使用防抖后,只有在用户停止输入一定时间后(比如 300 毫秒),才会触发搜索事件,从而减少处理器被频繁调用的次数。
以下是防抖的一个简单实现示例:
function debounce(fn, delay) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
解析
在这个例子中,我们定义了一个名为 debounce 的函数,它接收两个参数:fn 和 delay。fn 是需要执行的函数,delay 是防抖的延迟时间(以毫秒为单位)。在 debounce 函数中,我们使用了一个 timer 变量来存储计时器。每次执行 debounce 时,我们会清除上一次的计时器并设置一个新的计时器。当计时器时间达到 delay 时,我们会调用 fn 函数并传递给它所有的参数。这样,在用户输入的过程中,处理器只会在最后一次输入后被执行一次,从而避免了性能问题。
在Vue框架中,可以使用lodash库提供的_.debounce函数来实现防抖的效果:
<template>
<div>
<input type="text" v-model="keyword" @input="search">
</div>
</template>
<script>
import debounce from 'lodash/debounce'
export default {
data() {
return {
keyword: '',
}
},
methods: {
search: debounce(function () {
// 请求后端接口并更新页面
}, 200),
},
}
</script>
在上面的代码中,search方法会被防抖函数包装,每次触发输入事件时都会重新计时,直到200毫秒内没有再次触发事件才会执行实际的搜索操作。这样可以避免频繁的搜索请求。
- 上一篇: 1分钟搞懂防抖和节流(防抖和节流的作用)
- 下一篇: Spring Boot3 中接口防抖操作全解析
猜你喜欢
- 2025-05-08 佳能RF系统中有哪些宝藏镜头?(佳能rf镜头2021最新消息)
- 2025-05-08 前端分享-VueUse着实是有东西的(vue.use做了什么)
- 2025-05-08 前端必看!10 个 Vue3 实战技巧,解决 90% 开发难题?
- 2025-05-08 高并发下实现幂等的几种方式(并发和幂等)
- 2025-05-08 解释一下什么是防抖(Debounce)和节流(Throttle)? (面试题)
- 2025-05-08 前端人必收!10 个 Vue3 隐藏技巧,解决 99% 开发卡顿?
- 2025-05-08 CP+2016:五挡防抖 富士100-400现场试用
- 2025-05-08 「SpringCloud」(三十九)使用分布式锁实现微服务重复请求控制
- 2025-05-08 前端人必看!10 个 Vue3 救命技巧,专治性能差、代码乱
- 2025-05-08 频繁触发事件崩溃?JS 防抖节流 3 板斧,第 3 种 90% 人没用过!
你 发表评论:
欢迎- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作,推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 605℃几个Oracle空值处理函数 oracle处理null值的函数
- 597℃Oracle分析函数之Lag和Lead()使用
- 584℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 581℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 576℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 570℃【数据统计分析】详解Oracle分组函数之CUBE
- 557℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 550℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作,推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践(dataguard failover)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)