手写防抖debounce

手写防抖debounce

应用场景

当需要在事件频繁触发时,只执行最后一次操作,可以使用防抖函数来控制函数的执行频率,比如窗口resize事件和输入框input事件;

这段代码定义了一个名为 debounce 的函数,它接收两个参数:fn(一个需要被防抖处理的函数)和 delay(一个延迟时间,单位是毫秒)。防抖(debounce)技术的主要目的是限制某个函数在一定时间内只执行一次,即使在这段时间内被频繁调用。这对于优化性能特别有用,比如避免因快速连续触发事件(如窗口调整大小、输入验证等)而造成的不必要的计算或 DOM 操作。

下面是代码的逐行解析:

  • let timer = null;:在这个函数作用域内声明一个变量 timer,并初始化为 null。这个变量将用来存储 setTimeout 的返回值,即一个可以被清除的计时器标识。
  • return function () { ... };debounce 函数返回一个新的匿名函数。这样做是因为我们希望返回一个经过防抖处理的新函数,而不是直接修改原函数。这种设计模式称为“闭包”,返回的函数能够访问外部函数(debounce)中的局部变量,如 timer
  • if (timer) clearTimeout(timer);:每次新的返回函数被调用时,首先检查 timer 是否存在且不为 null。如果存在,这意味着之前已经设置了一个定时器但尚未执行。此时,通过 clearTimeout 清除这个定时器,从而取消即将执行的 fn 调用。
  • timer = setTimeout(() => { fn.apply(this, arguments); }, delay);:这里设置一个新的定时器。当过了 delay 毫秒后,内部的箭头函数会被执行,它通过 apply 方法调用原始函数 fn,并确保 this 的上下文以及传给防抖函数的所有参数都能正确传递给 fnapply 的第一个参数 this 保证了在 fn 被调用时能保留正确的上下文环境,特别是当 fn 是对象的方法时;第二个参数 arguments 是一个类数组对象,包含了所有传入的参数。
function debounce(fn, delay) {let timer = null;return function () {
如果此时存在定时器的话,则取消之前的定时器重新记时if (timer) clearTimeout(timer);// 设置定时器,使事件间隔指定事件后执行timer = setTimeout(() => {fn.apply(this, arguments);}, delay);};}

应用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="text" id="myInput"><div id="display"></div>
</body>
<script>// 假设这是你的去抖动函数  function debounce(fn, delay) {let timer = null;return function () {if (timer) clearTimeout(timer);timer = setTimeout(() => {fn.apply(this, arguments);}, delay);};}// 这是你想要在输入框内容变化时执行的函数function updateContent(event) {// 获取输入框的值const inputValue = event.target.value;// 更新某个元素的内容(例如,一个显示框)displayElement.textContent = inputValue;}// 获取输入框和显示框的元素const inputElement = document.getElementById('myInput');const displayElement = document.getElementById('display');// 为输入框绑定事件监听器,并使用去抖动函数//将返回的函数绑定到相应的事件处理程序上,以实现防抖的效果。inputElement.addEventListener('input', debounce(updateContent, 500)); // 延迟500毫秒
</script></html>

展示

function debounce(fn,delay){
let timer=null;
return function(){
if(timer) clearTimeout(timer);
timer=setTimeout(()=>fn.apply(this,arguments),delay)
}}

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

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

相关文章

颠覆传统:探索Web3对传统计算机模式的冲击

随着Web3技术的崛起&#xff0c;传统计算机模式正面临着前所未有的冲击与挑战。Web3作为下一代互联网的代表&#xff0c;以其去中心化、安全可信的特性&#xff0c;正在颠覆着传统计算机模式的种种假设和局限性。本文将深入探讨Web3对传统计算机模式的冲击&#xff0c;并探索其…

关于stm32的复用和重映射问题

目录 需求IO口的复用和重映射使用复用复用加重映射 总结参考资料 需求 一开始使用stm32c8t6&#xff0c;想实现pwm输出&#xff0c;但是原电路固定在芯片的引脚PB10和PB11上&#xff0c;查看了下引脚的功能&#xff0c;需要使用到复用功能。让改引脚作为定时器PWM的输出IO口。…

PMP应考小技巧有哪些?

首先&#xff0c;制定合理的学习计划。将备考过程分解为小目标&#xff0c;并为每个目标设定截止日期。这样可以帮助我们有条不紊地进行学习&#xff0c;避免拖延和压力过大。 其次&#xff0c;选择适合自己的学习资源。PMP考试教材众多&#xff0c;可以选择一本权威的教材作为…

Idea-Linux远程开发部署

第一步&#xff1a;File->Remote Development 第二步&#xff1a; 第三步&#xff1a; 第四步&#xff1a;在Host位置填写Linux虚拟机的IP地址&#xff0c;在Username、Password填写对应的账号密码后点击Test Connection测试连接。 第五步&#xff1a; 第六步&#xff1a;在…

项目:仿RabbitMQ实现的消息队列组件

文章目录 写在前面开源仓库和项目上线其他文档说明 需求分析BrokerServer交换机类型持久化消息应答 模块划分服务端模块客户端模块交换机数据管理模块队列数据管理模块绑定数据管理模块消息数据管理模块队列信息管理模块虚拟机数据管理模块路由匹配模块消费者管理模块信道管理模…

做店干货|抖音小店找达人的要求以及渠道

大家好&#xff0c;我是喷火龙。 这么多年&#xff0c;我们做店一直是以达人合作为主&#xff0c;商品卡流量为辅&#xff0c;没有快进快出那一套&#xff0c;我们喜欢追求一个店铺的长期经营&#xff0c;长期产出&#xff0c;我们的逻辑是&#xff0c;产品可以死&#xff0c;…

折半查找二分查找

简介 折半查找也就是二分查找&#xff0c;也可以叫二分法&#xff0c;本质上都是一样的&#xff0c;通过比对中间值与目标值&#xff0c;一次性就能筛掉一半的数字。 举例&#xff1a; 一个猜数字游戏&#xff0c;让你来猜1-100中我选中的数&#xff0c;如果猜中游戏结束&…

elementUI输入框/选项卡与百度地图联动

文章目录 输入框/选项卡与百度地图联动示例html部分用到的插件main.js 输入框/选项卡与百度地图联动 示例 输入框/选项卡与百度地图联动 html部分 <template><el-form ref"Froms" :model"formData" label-width"120px"><el-for…

露营地管理小程序基于ThinkPHP+FastAdmin+UniApp开发

应用介绍 本文来自&#xff1a;露营地管理小程序基于ThinkPHPFastAdminUniApp开发 - 源码1688 基于ThinkPHPFastAdminUniApp开发的现代化的露营地管理小程序&#xff0c;是专为露营业务设计开发小程序应用。平台拥有多角色管理&#xff0c;同时具有营位预定、门票购买等功能模…

【距离四六级只剩一个星期!】刘晓艳四级保命班课程笔记(2)(可分享治资料~)

这一节是专门的听力课程&#xff0c;众所周知&#xff0c;咱们刘晓艳刘老师的口语不是特别的突出&#xff0c;当然口才是一流的☝️。 文章目录 听力预判听前预判 听力过程八大出题关键点视听一致同义转换 听完一道题后平时练习精听步骤 听力预判 听前预判 画关键词&#xff…

融合通信系统 | 让传统通信沟通无边界

随着通信技术以及互联网的发展&#xff0c;融合通信在各行各业中的应用日益增多&#xff0c;融合通信多样的通信方式为行业用户带来了极佳的通信体验&#xff0c;助力各行各业蓬勃发展&#xff0c;同时也为人们的生活和工作带来了极大的便利和效率。 融合通信系统是一种集成多种…

PHP 操作日期各种转换,常见日期转换,涉及聊天时间转换、涉及日周月年转换、涉及到图表日期转换

日期操作 一、根据日期生成日期数组 /*** 根据指定日期生成日期数组* param $start_time 开始时间* param $end_time 结束时间* return array 返回数组结果*/ function createDateArr($start_time, $end_time) {$open_start_time $start_time;$open_end_time $end_ti…

leetcode 1103.分糖果II

思路&#xff1a;模拟 其实就是用num_people取余就行了&#xff0c;如果说特别一点的话&#xff0c;就是candies的判断了。 如果说当前的candies能够分发出来&#xff0c;那么这个candies就按照题目要求分发即可&#xff1b;如果说不够&#xff0c;那么只能分给当前小朋友can…

C语言基础——数组(2)

ʕ • ᴥ • ʔ づ♡ど &#x1f389; 欢迎点赞支持&#x1f389; 个人主页&#xff1a;励志不掉头发的内向程序员&#xff1b; 专栏主页&#xff1a;C语言基础&#xff1b; 文章目录 前言 一、二维数组的创建 1.1 二维数组的概念 1.2二维数组的创建 二、二维数组…

岁月情深,爱如初见——我爸爸的老年爱情故事

​在那个泛黄的老相册里&#xff0c;藏着一对青涩的恋人&#xff0c;他们的眼神清澈而坚定&#xff0c;仿佛早已约定了今生的不离不弃。那便是我的爸爸和他的爱人&#xff0c;妈妈。时光荏苒&#xff0c;转眼间&#xff0c;两人已是白发苍苍的老人&#xff0c;但他们的爱情故事…

网络安全中攻击溯源方法

目前网络攻击已经成为常见的安全威胁之一&#xff0c;其造成的危害和损失都是不可估量的&#xff0c;因此网络攻击受到了高度重视。而当我们遭遇网络攻击时&#xff0c;攻击溯源是一项非常重要的工作&#xff0c;可以帮助我们迅速发现并应对各类网络攻击行为&#xff0c;那么网…

Jetpack架构组件_LifeCycle组件

1.LifeCycle组件 LifeCycle组件可以让我们自定义的类能主动感知到Activity、Fragment、Application、Service等系统组件的生命周期。 我们以百度定位为例&#xff0c;我们一般在Activity生命周期的onCreate回调函数里调用自定义类LocationService的Start()方法&#xff0c;在o…

四川古力未来科技抖音小店:诚信之选,品质铸就信赖之路

在当今这个数字化、网络化的时代&#xff0c;电商平台如雨后春笋般涌现&#xff0c;抖音小店作为其中的佼佼者&#xff0c;以其独特的经营模式和广泛的用户基础&#xff0c;吸引了越来越多的消费者。而在这众多的抖音小店中&#xff0c;四川古力未来科技抖音小店凭借其卓越的品…

【HarmonyOS】应用屏蔽截屏和录屏

【HarmonyOS】应用屏蔽截屏和录屏 一、问题背景&#xff1a; 金融类或者高密性质的应用APP&#xff0c;对于截屏和录屏场景&#xff0c;某些业务下是禁止不允许。 目前这种场景的需求也是非常有必要的&#xff0c;很多电诈都是通过远程录屏软件&#xff0c;获取到账户密码或者…

头颈肿瘤在PET/CT中的分割:HECKTOR挑战赛| 文献速递-深度学习肿瘤自动分割

Title 题目 Head and neck tumor segmentation in PET/CT: The HECKTOR challenge 头颈肿瘤在PET/CT中的分割&#xff1a;HECKTOR挑战赛 01 文献速递介绍 高通量医学影像分析&#xff0c;常被称为放射组学&#xff0c;已显示出其在揭示定量影像生物标志物与癌症预后之间关…