手写防抖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;一次性就能筛掉一半的数字。 举例&#xff1a; 一个猜数字游戏&#xff0c;让你来猜1-100中我选中的数&#xff0c;如果猜中游戏结束&…

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

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

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

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

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

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

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

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

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

在当今这个数字化、网络化的时代&#xff0c;电商平台如雨后春笋般涌现&#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;已显示出其在揭示定量影像生物标志物与癌症预后之间关…

基于单片机的超声波倒车雷达设计

摘 要&#xff1a;文 章设计了一种基于单片机的超声波倒车雷达系统&#xff0c;以 AT89C51 型单片机作为控制核心&#xff0c;集距离测量、显示&#xff0c;方位显示和危险报警于一体&#xff0c;以提高驾驶者在倒车泊车时的安全性和舒适性。本设计采用 Keil 软件对系统程序…

已办理劳务资质,为何无法在全国建筑市场网查询到企业?

已办理劳务资质的企业无法在全国建筑市场网&#xff08;四库一平台&#xff09;查询到&#xff0c;可能的原因如下&#xff1a; 数据更新延迟&#xff1a; 全国建筑市场监管公共服务平台&#xff08;四库一平台&#xff09;的数据更新可能存在延迟。新获得的劳务资质信息在平台…

第一次参加学术会议?来看看这份NeurIPS 2024的参会攻略

会议之眼 快讯 嘿&#xff0c;亲爱的学者们&#xff01;有没有还没参加过学术会议的同学呢&#xff1f;别担心&#xff0c;今天小编就来给大家分享一份超实用的参会攻略&#xff0c;以人工智能领域备受瞩目的NeurIPS 2024为例&#xff0c;让你第一次参加学术会议就能像个老手一…

day4 数1 隐函数

基础知识 隐函数 &#xff1a;一个方程里边 使x有1个y与之对应 函数的有界性 f(X) 的值大于-M并小于M 单调性 可以用定义发判断单调性 定义法 奇函数 奇函数关于原点对称&#xff0c;偶关于x对称 定义域要关于原点对称 任何一个函数可以写成奇函数偶函数的形式 复合函数的…

gorm/gin框架实战

gorm/gin框架实战 项目简介 学习源视频&#xff1a;【最新Go Web开发教程】基于gin框架和gorm的web开发实战 (七米出品)_哔哩哔哩_bilibili 本博客为我的学习笔记。 项目目标&#xff1a;实现一个备忘录工具(当然不支持alert)&#xff0c;仅仅是可以记录待办事项。 实现了…

川北医学院与爱尔眼科医院集团签署战略合作协议共谋医学发展新篇章

为深入贯彻落实党的二十大精神&#xff0c;统筹校、企、医、政多方资源&#xff0c;服务“健康中国”战略&#xff0c;推动眼健康产业发展&#xff0c;打造国家及区域级眼科医学中心&#xff0c;2024年5月31日&#xff0c;川北医学院与爱尔眼科医院集团在成都举行战略合作协议签…

数字化校园建设让学习更加广阔

校园构建数字化校园的亮点是什么&#xff1f;校园以智能服务、才智办理、数字讲堂为中心内容的智慧校园建造&#xff0c;不只使师生作业和日子更高效&#xff0c;并且使他们有更多的时刻投入到智能教育和智能学习中去&#xff0c;进步教育质量&#xff0c;使学生走出校门时紧跟…

代码随想录第23天|回溯part3 组合与分割

39.组合总和 class Solution { public:vector<vector<int>> res;vector<int> path;void backTracking(vector<int>& candidates,int target,int sum,int n,int step){if(n > 150) return;if(sum > target) return;if(sum target){res.push_…