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

防抖函数(最全 最干净 最好理解)

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的对…...

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

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

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

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

Linux--tty

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

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

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

C++命名空间详解

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

HDMI EDID概念梳理

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

Android端推送消息之极光推送

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

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

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

十、CNN卷积神经网络实战

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

App 自动化测试

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

考研英语知识点

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

IPSEC实验(IPSECVPN点到点,DSVPN,IPSECVPN旁挂)

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

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

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

tomcat作业

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

除了Java,还可以培训学习哪些IT技术?

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

Mysql优化(一)-- sql语句优化概述及数据库优化

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

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

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

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

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

WebRTC 系列(三、点对点通话,H5、Android、iOS)

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

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...