手写防抖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.rhkb.cn/news/339755.html

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

相关文章

刷新页面控制台莫名奇妙报错显示/files/test_files/file_txt.txt

今天突然发现每次刷新页面都有几个报错&#xff0c;不刷新页面就没有。 这个报错应该不是我们系统的问题&#xff0c;是因为装了浏览器插件的原因。比如我安装了 大家有没有遇到类似的问题。

数据结构第三篇【链表的相关知识点一及在线OJ习题】

数据结构第三篇【链表的相关知识点一及在线OJ习题】 链表链表的实现链表OJ习题顺序表和链表的区别和联系 本文章主要讲解关于链表的相关知识&#xff0c;喜欢的可以三连喔 &#x1f600;&#x1f603;&#x1f604;&#x1f604;&#x1f60a;&#x1f60a;&#x1f643;&#…

我的app开始养活我了

大家在日常使用各类 app 时应该会发现&#xff0c;进入 app 会有个开屏广告&#xff0c;在使用 app 中&#xff0c;时不时的也会有广告被我们刷到。 这时候如果我们看完了这个广告&#xff0c;或者点击了这个广告的话&#xff0c;app商家就会获得这个广告的佣金。 这个佣金就是…

一款高效办公软件及48个快捷键

君子生非异也&#xff0c;善假于物也。 一天&#xff0c;技术同事亲自操刀要撰写一篇公号文档&#xff0c;于是问我需要什么样的排版格式&#xff1f; 我很快甩了一篇《水经注文档排版规范》给对方。 片刻之后&#xff0c;同事觉得这样写文档的效率太低&#xff0c;于是说要…

64位Office API声明语句第119讲

跟我学VBA&#xff0c;我这里专注VBA, 授人以渔。我98年开始&#xff0c;从源码接触VBA已经20余年了&#xff0c;随着年龄的增长&#xff0c;越来越觉得有必要把这项技能传递给需要这项技术的职场人员。希望职场和数据打交道的朋友&#xff0c;都来学习VBA,利用VBA,起码可以提高…

2024年比较火的桌面便利贴,适合懒人的电脑便签

在2024年的数字化生活中&#xff0c;高效的电脑便签软件成为了许多“懒人”提升生产力的秘密武器。这些软件不仅让信息记录变得轻松快捷&#xff0c;还能帮助用户有效管理时间&#xff0c;减少遗忘&#xff0c;让桌面保持整洁有序。 其中&#xff0c;“好用便签”以简洁的设计…

新闻发稿:8个新闻媒体推广中最常见的错误-华媒舍

在数字时代&#xff0c;新闻媒体的推广手段已经越来越多样化。许多媒体在推广过程中常常会犯下一些常见错误。本文将会介绍八个新闻媒体在推广中最常见的错误&#xff0c;并希望能够帮助各位更好地规避这些问题。 1. 缺乏明确的目标受众 在进行推广前&#xff0c;新闻媒体需要…

【一百】【算法分析与设计】N皇后问题常规解法+位运算解法

N皇后问题 链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 题目描述 给出一个nnn\times nnn的国际象棋棋盘&#xff0c;你需要在棋盘中摆放nnn个皇后&#xff0c;使得任意两个皇后之间不能互相攻击。具体来说&#xff0c;不能存在两个皇后位于同…

任务3.3 学生喂养三种宠物:猫、狗和鸟

本任务旨在通过Java面向对象编程中的多态性和方法重载概念&#xff0c;实现一个学生喂养三种不同宠物&#xff08;猫、狗、鸟&#xff09;的程序。 定义基类和派生类 创建一个Animal基类&#xff0c;包含所有动物共有的属性和方法&#xff0c;如name、age、speak()、move()和ea…

项目-双人五子棋对战: websocket的讲解与使用 (1)

项目介绍 接下来, 我们将制作一个关于双人五子棋的项目, 话不多说先来理清一下需求. 1.用户模块 用户的注册和登录 管理用户的天梯分数, 比赛场数, 获胜场数等信息. 2.匹配模块 依据用户的天梯积分, 实现匹配机制. 3.对战模块 把两个匹配到的玩家放到同一个游戏房间中, 双方通…

基于大数据爬虫技术的图书推荐系统与可视化平台设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝1W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;还…

MySQL数据库语法(二)

一、数据库的创建 创建数据库CRATE DATABASE语法&#xff1a;CREATE DATABASE [IF NOT EXISTS]数据库名;功能&#xff1a;用给定的名字创建一个数据库如果数据库已经存在&#xff0c;发生一个错误。查看创建数据库&#xff1a;SHOW CREATE DATABASE <数据库名>&#xff…

好用的linux链接工具

工具下载链接&#xff1a; FinalShell SSH工具,服务器管理,远程桌面加速软件,支持Windows,macOS,Linux,版本4.3.10,更新日期2023.12.31 - FinalShell官网FinalShell是一体化的的服务器,网络管理软件,不仅是ssh客户端,还是功能强大的开发,运维工具,充分满足开发,运维需求.特色功…

SpringBoot——全局异常处理

目录 异常 项目总结 新建一个SpringBoot项目 pom.xml Result&#xff08;通用的响应结果类&#xff09; MyBusinessException自定义异常类 GlobalExceptionHandler全局异常处理类 ExceptionController控制器 SpringbootExceptionApplication启动类 参考文章&#xff1a…

Facebook开户|Facebook公共主页疑难杂症详解

​​要要切克闹&#xff0c;公共主页我来道...哈喽呀家人们中午好&#xff0c;上一次学习还是在上一次..hhh相信很多家人在做Facebook的时候总会遇到各种各样匪夷所思的bug&#xff01;经常被搞心态吧&#xff01;那么咱们今天呢就来总结一下各类的bug以及解决方法&#xff0c;…

EPSON爱普生RTC RA8900CE/RA8000CE+松下Panasonic电池组合

RTC是一种实时时钟&#xff0c;用于记录和跟踪时间&#xff0c;具有独立供电和时钟功能。在某些应用场景中&#xff0c;为了保证RTC在断电或者其他异常情况下依然能够正常工作&#xff0c;需要备份电池方案来提供稳定的供电。本文将介绍EPSON爱普生RTC RA8900CE/RA8000CE松下Pa…

王春城 | 如何解决精益转型过程中的信任问题?

实践证明&#xff0c;精益转型不仅仅是技术和管理方法的更新&#xff0c;更是一场深刻的文化变革。在这个过程中&#xff0c;涉及到多个部门、多个层级的协同合作&#xff0c;需要团队成员之间的深度沟通和高度信任。如果缺乏信任&#xff0c;团队成员之间就会产生隔阂和抵触情…

手写数据集minist基于pytorch分类学习

1.Mnist数据集介绍 1.1 基本介绍 Mnist数据集可以算是学习深度学习最常用到的了。这个数据集包含70000张手写数字图片&#xff0c;分别是60000张训练图片和10000张测试图片&#xff0c;训练集由来自250个不同人手写的数字构成&#xff0c;一般来自高中生&#xff0c;一半来自工…

linux中最基础使用的命令

小白学习记录&#xff1a; 前情提要&#xff1a;Linux命令基础格式!查看 ls看目录的小技巧 进入指定目录 cd查看当前工作目录 pwd创建一个新的目录(文件夹&#xff09; mkdir创建文件 touch查看文件内容 cat、more操作文件、文件夹- 复制 cp- 移动 mv- 删除【危险操作&#xff…

OpenAI 近期动荡:解雇 Sam Altman 事件分析与 AI 未来展望

引言 OpenAI 的动荡从未停止。最近&#xff0c;由于 OpenAI 高层领导的更迭&#xff0c;引发了广泛的关注和讨论。特别是在 Sam Altman 被解雇后&#xff0c;再次回归 CEO 职位的过程&#xff0c;更是引起了公众和业内的巨大反响。前 OpenAI 董事会成员 Helen Toner 在最新一期…