什么是防抖和节流?有什么区别? 如何实现?

防抖(Debounce)节流(Throttle)是两种常用的技术手段,主要用于控制某个函数在一定时间内触发的次数,以减少触发频率,提高性能并避免资源浪费。

防抖(Debounce)的工作原理是,当事件持续触发时,只有在事件停止触发n秒后,才会执行事件函数。如果在n秒内事件被重新触发,那么之前的计时会被重置。这种技术通常用于如模糊搜索、短信验证和文本编辑器实时保存等场景。

节流(Throttle)的工作原理是,当事件持续触发时,每n秒只执行一次函数。如果在n秒内事件被重复触发,那么只有第一次触发的事件会生效。这种技术常用于处理如scroll事件、浏览器播放事件和window的resize等场景。

防抖(Debounce)是指在一定时间内,当函数被频繁触发时,只有在最后一次触发后的延迟时间内,函数才会被真正执行。如果在延迟时间内又有触发事件发生,会重新开始计时。防抖技术常用于搜索框输入、按钮点击等场景,避免短时间内的频繁请求。

以下是一个简单的防抖示例代码:

// 创建一个防抖函数
function debounce(func, delay) {
 let debounceTimer;
 return function () {   // 清除之前设置的定时器   clearTimeout(debounceTimer);   // 设置一个新的定时器,延迟 delay 毫秒后执行 func 函数   debounceTimer = setTimeout(() => {     func.apply(this, arguments);   }, delay); }}// 使用防抖函数
const searchInput = document.getElementById('searchInput');
const debouncedSearch = debounce(() => { console.log('执行搜索操作');}, 500);
searchInput.addEventListener('keyup', debouncedSearch);

在上述示例中,创建了一个名为 debounce 的函数,它接受一个要执行的函数 func 和延迟时间 delay。在调用 debouncedSearch 函数时,会清除之前设置的定时器,并重新设置一个定时器,在延迟时间后执行 func 函数。

节流(Throttle)是指在一定时间内,无论函数被触发多少次,函数只会在固定的时间间隔内执行一次。如果在时间间隔内有多次触发事件,只会执行最后一次。节流技术常用于滚动事件、鼠标移动等场景,限制函数的执行频率。

以下是一个简单的节流示例代码:

// 创建一个节流函数function throttle(func, delay) { let canRun = true; return function () {   if (canRun) {     func.apply(this, arguments);     canRun = false;     setTimeout(() => {       canRun = true;     }, delay);   } }}// 使用节流函数
const scrollEventHandler = throttle(() => { console.log('滚动事件触发');}, 1000);
window.addEventListener('scroll', scrollEventHandler);

在上述示例中,创建了一个名为 throttle 的函数,它同样接受一个要执行的函数 func 和延迟时间 delay。在调用 throttle 函数时,如果 canRun 为 true,则执行 func 函数,并将 canRun 设置为 false。然后,通过设置一个定时器,在延迟时间后将 canRun 设置为 true,以便下一次函数调用。

防抖和节流的主要区别在于:防抖是在最后一次触发后的延迟时间内执行函数,而节流是在固定的时间间隔内执行函数。

选择使用防抖还是节流,取决于具体的业务需求和场景。防抖更适合处理连续的快速触发事件,而节流更适合限制频繁触发事件的执行频率。

希望这个解释对你有所帮助!如果你还有其他问题,请随时提问。

欢迎加入“前端组件开发学习”交流群,一起学习成长!可关注  “前端组件开发” 公众号后,私信后申请入群。

d848d5658a07453c843277846948c608.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/639998.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

图像哈希:GLCM+DCT

文章信息 作者:Ziqing Huang期刊:IEEE(一区)题目:Perceptual Image Hashing with Texture and Invariant Vector Distance for Copy Detection 目的、实验步骤及结论 目的:使用GLCM进行全局特征的提取&am…

Python 数据库简化操作:dataset 库介绍

文章目录 Python 数据库简化操作:dataset 库介绍第一部分:背景介绍第二部分:库是什么?第三部分:如何安装这个库?第四部分:库函数使用方法第五部分:场景应用第六部分:常见…

C++初阶学习第二弹——C++入门(下)

C入门(上):C初阶学习第一弹——C入门(上)-CSDN博客 目录 一、引用 1.1 引用的实质 1.2 引用的用法 二、函数重载 三、内敛函数 四、auto关键字 五、总结 前言: 在上面一章我们已经讲解了C的一些基本…

echarts 双堆叠柱状图(数据整理)

1.后台返回的数据格式 {"code": "0000","message": "","messageCode": "操作成功","sign": null,"detail": null,"data": {"pieChart": [{"key": "产品…

Git下载安装

天行健,君子以自强不息;地势坤,君子以厚德载物。 每个人都有惰性,但不断学习是好好生活的根本,共勉! 文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。…

就业班 第三阶段(负载均衡) 2401--4.19 day3 nginx3

二、企业 keepalived 高可用项目实战 1、Keepalived VRRP 介绍 keepalived是什么keepalived是集群管理中保证集群高可用的一个服务软件,用来防止单点故障。 ​ keepalived工作原理keepalived是以VRRP协议为实现基础的,VRRP全称Virtual Router Redundan…

RAG部署 | 使用TensorRT-LLM在Windows上部署检索增强生成聊天机器人RAG

项目应用场景 面向 Windows 平台部署 RAG 检索增强生成聊天机器人场景,项目采用 TensorRT-LLM 进行 GPU 加速推理,注意项目需要 RT4090 及以上的英伟达显卡支持。 项目效果 项目细节 > 具体参见项目 README.md (1) 下载构建好的 Llama2 TensorRT 模型…

[RTOS 学习记录] 复杂工程项目的管理

[RTOS 学习记录] 复杂工程项目的管理 这篇文章是我阅读《嵌入式实时操作系统μCOS-II原理及应用》后的读书笔记,记录目的是为了个人后续回顾复习使用。 前置内容: 工程管理工具make及makefile 文章目录 1 批处理文件与makefile的综合使用1.1 批处理文件…

BootstrapAdmin Net7:基于RBAC的后台管理框架,实现精细化权限管理与多站点单点登录

BootstrapAdmin Net7:基于RBAC的后台管理框架,实现精细化权限管理与多站点单点登录 摘要 随着企业信息化建设的不断深入,后台管理系统在企业运营中扮演着越来越重要的角色。本文介绍了一款基于RBAC(Role-Based Access Control)的…

sc2024项目consul

1. 什么是consul HashiCorp Consul是一款服务网络解决方案,可让团队管理服务之间以及内部部署和多云环境及运行时的安全网络连接。consul提供服务发现、服务治理、流量管理和对网络基础设施设备的自动更新。(添加链接描述)Consul使用Go语言开发 2. 功能 多数据中…

(CVPR,2024)CAT-Seg:基于成本聚合的开放词汇语义分割

文章目录 相关论文相关资料摘要引言方法计算成本与嵌入空间成本聚合类别成本聚合CAT-Seg框架 实验 相关论文 (CVPR,2024)SED:一个用于开放词汇语义分割的简单编解码器 (CVPR,2024)CAT-Seg&…

Vuex 的原理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store(仓库)。“store” 基本上就是一个容器,它包含着你的应用中大部分的状态 ( state )。 Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的…