当前位置： 首页 > news >正文

防抖函数（最全 最干净 最好理解）

news 2026/5/19 6:26:16

1.应用场景

1.input输入框 输入远程查询

2.邮箱，手机号验证，用户名验证

3.resize等高评率场景

2.解决问题

高频场景带来的重复渲染 等问题

多次操作 只在操作结束后再执行操作函数

3.具体实现

3.1this问题（因为settimeout是window的对象 所以函数中this指向window 除非箭头函数）

1.事件函数里的this才指向box

错误示范：return里面的this 与函数体内的this指向 在不同场景中 指向并不相同

解决方案： 可以使用 fun.call(this) 来重定向函数中this的指向 【call 传参是单个】

3.2事件对象

1.arguments 作为函数的关键字，它接收的是这个函数传递的所有实参，包括这个事件对象

因为事件对象是默认传递的参数，因为call只能传递一个参数，所以我们选择使用 fun.apply(this, args)


3.3具体代码实现
 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html {height: 100%;}body {display: flex;height: 100%;justify-content: center;align-items: center;}.box {width: 100px;height: 100px;text-align: center;line-height: 100px;background: #FF9800;color: #fff;}</style>
</head>
<body><div class="box">  0 </div><script>const debounce = function (fun, delay) {let timeoutreturn function() {timeout && clearTimeout(timeout)// 解决事件函数绑定中thislet that = this// 绑定事件中 事件函数的传递let argus = argumentstimeout = setTimeout(() => {fun.apply(that, argus)  }, delay);}}function fun(e) {count++console.log('>>>>>>>>>>>>', e, this)e.target.innerText = count}let count = 0console.log()document.querySelectorAll('.box')[0].addEventListener('mousemove', debounce(fun, 300))</script>
</body>
</html>

相关文章：

防抖函数（最全 最干净 最好理解）

1.应用场景 1.input输入框 输入远程查询 2.邮箱&#xff0c;手机号验证&#xff0c;用户名验证 3.resize等高评率场景 2.解决问题 高频场景带来的重复渲染 等问题 多次操作 只在操作结束后再执行操作函数 3.具体实现 3.1this问题&#xff08;因为settimeout是window的对…...

编程日记 2023/4/20 9:48:25

王小川，才是深「爱」李彦宏的那个人？

在推出中国首个类ChatGPT产品「文心一言」后&#xff0c;李彦宏在接受专访时断言&#xff0c;中国基本不会再出一个OpenAI了&#xff0c;「创业公司重新做一个ChatGPT其实没有多大意义&#xff0c;基于大语言模型开发应用机会很大&#xff0c;没有必要再重新发明一遍轮子。」 听…...

编程日记 2023/5/30 2:06:34

南京邮电大学通达学院2023《电子装配实习》报告

南京邮电大学通达学院2023《电子装配实习》报告 一 声明二 题目/实习报告提示三 例答 红笺寄 休遣玉人知 ——赠nmy 一 声明 南京邮电大学通达学院2023《电子装配实习》报告 答案更新时间:2023.04.10&#xff0c;已更新完成&#xff0c;如无错误不在更新 由于作者解答能力有限…...

编程日记 2023/4/20 9:38:22

Linux--tty

Linux 终端(TTY) TTY 是 Teletype 或 Teletypewriter 的缩写&#xff0c;原来是指电传打字机&#xff0c;后来这种设备逐渐键盘和显示器取代。不管是电传打字机还是键盘显示器&#xff0c;都是作为计算机的终端设备存在的&#xff0c;所以 TTY 也泛指计算机的终端(terminal)设…...

编程日记 2023/4/20 9:33:21

一位女程序员的自述：我是如何成为前端工程师的

今天&#xff0c;我想和大家分享一下我的职场经历&#xff1a;我是如何成为一名前端工程师的&#xff0c;以及我为什么会选择这个职业。此外&#xff0c;大家比较关心的是我们为什么要出国工作呢&#xff1f;也是想给自己的职业生涯做一个阶段性的总结&#xff0c;尤其是作为一…...

编程日记 2023/4/20 9:28:20

C++命名空间详解

1.什么是命名空间 在c中&#xff0c;名称&#xff08;name&#xff09;可以是符号常量、变量、函数、结构、枚举、类和对象等等。工程越大&#xff0c;名称互相冲突性的可能性越大。另外使用多个厂商的类库时&#xff0c;也可能导致名称冲突。为了避免&#xff0c;在大规模程序…...

编程日记 2023/6/1 12:31:35

HDMI EDID概念梳理

EDID概念梳理&#xff1a; EDID数据格式&#xff1a; EDID包含两个部分&#xff0c;基本的EDID只有128个字节&#xff0c;还有128字节的扩展EDID&#xff0c;扩展部分不是必须有的。那通常电视都有扩展EDID。那EDID的详细定义在规范里面都可以找到&#xff0c;主要有以下几部分…...

编程日记 2023/4/20 9:18:18

Android端推送消息之极光推送

推送方式 轮询 --实现方式: 周期性主动获取网络中的数据; --缺点: 费电, 费流量; SMS --实现方式: 服务器端向手机端发送短信, 手机监听短信广播, 将拦截的短信信息进行显示; --优点: 省电, 省流量, 在没有网络的偏远地点也能接收到推送消息; --缺点: 费钱, 一毛钱一条;…...

编程日记 2023/5/30 2:56:05

2023测试工程师全新技术栈，吃透这些，起薪就15k

相信每个准备软件测试面试的同学&#xff0c;不管你是大学刚毕业&#xff0c;满心憧憬着进入公司实习、非计算机行业转行软件测试、自学测试就业还是培训后就业&#xff0c;都会面临着众多的疑问和不解&#xff0c;那就是该怎么走出着第一步&#xff0c;今天本文一次性告诉你&a…...

编程日记 2023/4/20 9:08:14

十、CNN卷积神经网络实战

一、确定输入样本特征和输出特征 输入样本通道数4、期待输出样本通道数2、卷积核大小33 具体卷积层的构建可参考博文&#xff1a;八、卷积层 设定卷积层 torch.nn.Conv2d(in_channelsin_channel,out_channelsout_channel,kernel_sizekernel_size,padding1,stride1) 必要参数&a…...

编程日记 2023/5/30 3:01:46

App 自动化测试

一、移动端测试基础 1 移动端自动化环境搭建 1.1 java安装 1.2 Android SDK安装 SDK (Software Development Kit) 软件开发工具包是软件开发工程师用于为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件的开发工具的集合。Android SDK 就是 Android 专属的软件开…...

编程日记 2023/5/30 23:28:01

考研英语知识点

考研英语知识点 一、在考研英语考试中&#xff0c;常考的英语时态 1.一般现在时 (Simple Present Tense) 一般现在时指的是现在正在进行或经常发生的事情。它用于描述普遍真理&#xff0c;频繁的习惯&#xff0c;以及现在正在发生的事情。例如&#xff1a;我每天早上六点起床…...

编程日记 2023/4/20 8:53:10

IPSEC实验（IPSECVPN点到点，DSVPN,IPSECVPN旁挂）

目录 一、复现实验1、防火墙的IPSECVPN点到点实验-1,拓扑图的搭建-2&#xff0c;配置IP,开通ping,并且设置策略-3&#xff0c;在网络中的IPSEC进行配置第一阶段&#xff1a;发出的UDP500流量第二阶段 发出的ESP流量二台防火墙建立策略禁用其它策略&#xff0c;在IPSEC上配置策略…...

编程日记 2023/6/1 12:22:15

从4k到42k，软件测试工程师的涨薪史，给我看哭了

清明节一过&#xff0c;盲猜大家已经无心上班&#xff0c;在数着日子准备过五一&#xff0c;但一想到银行卡里的余额……瞬间心情就不美丽了。 最近&#xff0c;2023年高校毕业生就业调查显示&#xff0c;本科毕业月平均起薪为5825元。调查一出&#xff0c;便有很多同学表示自己…...

编程日记 2023/5/30 23:15:23

tomcat作业

简述静态网页和动态网页的区别。 静态网页和动态网页是网站的两种基本类型。它们的主要区别在于它们如何生成和呈现网页内容。 静态网页是一种由服务器直接发送给用户的固定HTML文件&#xff0c;其中包含所有网页的内容和样式。这些页面不会随着用户的操作而改变&#xff0c;它…...

编程日记 2023/4/20 8:38:02

除了Java，还可以培训学习哪些IT技术？

除了Java&#xff0c;还可以培训学习哪些IT技术&#xff1f; 转行IT学Java似乎已经成为很多人的首选&#xff0c;原因无非是开发技术含量高、开发有前景、开发是一个互联网企业的核心岗位&#xff0c;最重要的是开发薪资待遇高。但其实只单纯因为薪资选择Java的话&#xff0c;小…...

编程日记 2023/4/20 8:33:00

Mysql优化（一）-- sql语句优化概述及数据库优化

1. sql语句优化 1.1 优化查询过程中的数据访问 访问数据太多导致查询性能下降确定应用程序是否在检索大量超过需要的数据&#xff0c;可能是太多行或列确认MySQL服务器是否在分析大量不必要的数据行避免犯如下SQL语句错误 查询不需要的数据。解决办法&#xff1a;使用limit解…...

编程日记 2023/5/30 23:34:19

深度学习快速参考：1~5

原文&#xff1a;Deep Learning Quick Reference 协议&#xff1a;CC BY-NC-SA 4.0 译者&#xff1a;飞龙 本文来自【ApacheCN 深度学习 译文集】&#xff0c;采用译后编辑&#xff08;MTPE&#xff09;流程来尽可能提升效率。 不要担心自己的形象&#xff0c;只关心如何实现目…...

编程日记 2023/4/20 8:22:56

软件设计师笔记-----程序设计语言与语言处理程序基础

文章目录 七、程序设计语言与语言处理程序基础7.1、编译与解释&#xff08;低频&#xff09;7.2、文法&#xff08;低频&#xff09;7.3、有限自动机与正规式&#xff08;几乎每次都会考到&#xff09;有限自动机正规式 7.4、表达式&#xff08;偶尔考到&#xff09;7.5、传值和…...

编程日记 2023/4/20 8:17:53

WebRTC 系列（三、点对点通话，H5、Android、iOS）

WebRTC 系列&#xff08;二、本地 demo&#xff0c;H5、Android、iOS&#xff09; 上一篇博客中&#xff0c;我已经展示了各端的本地 demo&#xff0c;大家应该知道 WebRTC 怎么用了。在本地 demo 中是用了一个 RemotePeerConnection 来模拟远端&#xff0c;可能理解起来还有点…...

编程日记 2023/4/20 8:12:51

2026届必备的AI辅助论文网站解析与推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 于学术研究的范畴之内&#xff0c;高效且可靠的AI辅助工具正逐渐演变成学者以及学生的得力帮…...

编程新知 2026/5/19 5:30:06

NotebookLM引用格式生成失效真相：Google官方未公开的citation token截断限制（含绕过验证方案）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;NotebookLM引用格式生成失效真相&#xff1a;Google官方未公开的citation token截断限制&#xff08;含绕过验证方案&#xff09; NotebookLM 在处理长篇 PDF 或网页源时&#xff0c;常出现引用标记&am…...

编程新知 2026/5/19 5:28:03

告别环境焦虑：用 Conda 在 Ubuntu 上轻松管理 JAX (CPU/GPU) 和 TensorFlow 的多个版本

告别环境焦虑&#xff1a;用 Conda 在 Ubuntu 上轻松管理 JAX (CPU/GPU) 和 TensorFlow 的多个版本 深度学习框架的版本冲突问题&#xff0c;一直是开发者心中的痛。你是否经历过这样的场景&#xff1a;昨天还能正常运行的 TensorFlow 项目&#xff0c;今天更新了 CUDA 驱动后就…...

编程新知 2026/5/19 5:06:54

2025届学术党必备的六大降AI率助手解析与推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 身处人工智能生成内容也就是AIGC越来越普遍的大背景当中&#xff0c;怎样去有效地降低它被检…...

编程新知 2026/5/19 4:50:36

特斯拉Model 3无线充电垫DIY：基于Qi标准与3D打印的集成方案

1. 项目概述&#xff1a;为你的特斯拉Model 3打造专属无线充电垫作为一个喜欢在车里折腾点小玩意儿的车主&#xff0c;我总觉得特斯拉Model 3中控台那两个USB-C接口有点不够用&#xff0c;每次上车给手机充电都得插线&#xff0c;线缆还容易在储物格里缠成一团。原厂虽然提供了…...

编程新知 2026/5/19 2:26:07

‌隐私透明化测试：直播用户数据的匿名表演‌

一、直播用户数据匿名化&#xff1a;隐私保护的核心防线在直播行业高速发展的当下&#xff0c;用户数据已成为平台运营、内容优化和商业变现的核心资产。然而&#xff0c;数据的过度收集与滥用也引发了严重的隐私担忧。据2025年全球隐私监管报告显示&#xff0c;直播行业因用户…...

编程新知 2026/5/19 2:18:51

重复内容误标率高达37%？NotebookLM检测逻辑漏洞全曝光，立即修复这6个隐藏开关

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;重复内容误标率高达37%&#xff1f;NotebookLM检测逻辑漏洞全曝光&#xff0c;立即修复这6个隐藏开关 NotebookLM 的“重复内容检测”功能并非基于端到端语义比对&#xff0c;而是依赖于分块哈希&#…...

编程新知 2026/5/19 1:04:49

基于瞬态三角哈里斯鹰算法TTHHO实现多无人机协同集群避障路径规划（目标函数：最低成本：路径、高度、威胁、转角）附Matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;擅长毕业设计辅导、数学建模、数据处理、程序设计科研仿真。 &#x1f34e;完整代码获取 定制创新 论文复现点击&#xff1a;Matlab科研工作室 &#x1f447; 关注我领取海量matlab电子书和数学建模资料 &…...

编程新知 2026/5/19 0:45:46

如何免费解锁雀魂全角色皮肤：终极完整配置指南

如何免费解锁雀魂全角色皮肤&#xff1a;终极完整配置指南 【免费下载链接】majsoul_mod_plus 雀魂解锁全角色、皮肤、装扮等&#xff0c;支持全部服务器。 项目地址: https://gitcode.com/gh_mirrors/ma/majsoul_mod_plus 还在为无法获得心仪的雀魂角色而烦恼吗&#x…...

编程新知 2026/5/18 23:37:33

免费开源AMD Ryzen处理器调试工具：5分钟掌握SMUDebugTool终极指南

免费开源AMD Ryzen处理器调试工具&#xff1a;5分钟掌握SMUDebugTool终极指南 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址:…...

编程新知 2026/5/18 21:16:42