防抖和节流

防抖(Debouncing): 防抖是指在事件被触发后,等待一定的时间间隔,如果在这个时间间隔内再次触发该事件,则重新计时。只有当事件停止触发一段时间后,才会执行相应的操作。防抖常用于优化输入框的搜索建议、滚动事件等场景,可以减少不必要的请求或操作,提升性能。

节流(Throttling): 节流是指在一定的时间间隔内只触发一次事件,即使事件在这段时间内多次触发,也只会执行一次相应的操作。节流常用于优化滚动事件、窗口调整事件等,可以减少事件处理的频率,提高性能。

可以参考下图进行理解:

概念理解了,但是怎么实现防抖和节流呢????

例如下列代码,实现的效果是我只要我输入一个内容,就会触发一次。

function search(e) {let str = "您输入了:" + e.value + "<br />";s1.innerHTML = s1.innerHTML + str
}function search2(e) {let str = "您输入了:" + e.value + "<br />";s2.innerHTML = s2.innerHTML + str
}

防抖:

var timer;
function search(e) {// 判断如果timer存在,那么则将timer清除if(timer){clearTimeout(timer)}timer = setTimeout(() => {let str = "您输入了:" + e.value + "<br />";s1.innerHTML = s1.innerHTML + str},3000);
}

节流:

//定义一个变量
var lastTime; 
function search2(e) {var newTime = new Date();//判断当前时间是否已经过了三秒if(!lastTime || newTime - lastTime > 3000){let str = "您输入了:" + e.value + "<br />";s2.innerHTML = s2.innerHTML + str;//三秒过后,将我定义的变量稀释掉lastTime = newTime;}
}

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

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

相关文章

Elasticsearch,Kibana集成,x-pack鉴权配置

Elasticsearch,Kibana集成 Java8环境部署[CentOS7] cd /usr/local/src wget https://repo.huaweicloud.com/java/jdk/8u201-b09/jdk-8u201-linux-x64.tar.gztar -xzvf jdk-8u201-linux-x64.tar.gz -C /usr/local#配置环境变量 vim /etc/profile #文末添加 export JAVA_HOME/us…

强敌环伺:金融业信息安全威胁分析——钓鱼和恶意软件

门口的敌人&#xff1a;分析对金融服务的攻击 Akamai会定期针对不同行业发布互联网状态报告&#xff08;SOTI&#xff09;&#xff0c;介绍相关领域最新的安全趋势和见解。最新的第8卷第3期报告主要以金融服务业为主&#xff0c;分析了该行业所面临的威胁和Akamai的见解。我们发…

2023年11月Web3行业月度发展报告区块链篇 |陀螺研究院

11月&#xff0c;在宏观转好以及事件带动下&#xff0c;加密市场逐渐回暖。上月现货ETF带来的市场情绪持续增强&#xff0c;美方监管利好消息不断&#xff0c;零售投资者入场信号明显&#xff0c;持仓在10枚BTC以下的小规模投资者持仓持续上涨&#xff0c;推动BTC保持坚挺。利好…

sed 流式编辑器

使用方式&#xff1a; 1&#xff0c;前置指令 | sed 选项 定址符指令 2&#xff0c;sed 选项 定址符指令 被处理文档 选项&#xff1a; -n 屏蔽默认输出 -i写入文件 -r支持扩展正则 指令&#xff1a; p输出 d删除 s替换 sed -n 1p user //输出第1行 sed -n…

sklearn随机森林 测试 路面点云分类

一、特征5个坐标 坐标-特征-类别 训练数据 二、模型训练 记录分享给有需要的人&#xff0c;代码质量勿喷 import numpy as np import pandas as pd import joblib#region 1 读取数据 dir D:\\py\\RandomForest\\ filename1 trainRS filename2 .csv path dirfilename1file…

flutter的CircularProgressIndicator基本使用

CircularProgressIndicator 循环进度指示器视图 定义及作用 循环进度指示器视图。在页面绘制一个循环进度指示器视图。 参数 const CircularProgressIndicator({super.key,super.value,super.backgroundColor,super.color,super.valueColor,this.strokeWidth 4.0,//条的宽…

宝塔是可以切换mongodb版本的

在软件商店&#xff0c;搜索monggodb&#xff0c;点击设置。点击第三个标签版本切换即可。但是前提要删除所有非系统数据库。 删除数据库方法&#xff1a; 要在 MongoDB 中删除一个数据库&#xff0c;可以使用 dropDatabase() 命令。请注意&#xff0c;在执行此操作之前&#x…

flink使用事件时间时警惕kafka不同分区的事件时间倾斜问题

背景 flink和kafka的消息组合消费模式几乎是实时流处理的标配&#xff0c;然后当在flink中使用事件时间处理时&#xff0c;需要注意kafka不同分区元素之间时间相差太大的问题&#xff0c;这样有可能会导致严重的数据堆积问题 kafka不同分区元素事件时间差异较大导致的问题 总…

〖大前端 - 基础入门三大核心之JS篇㊼〗- BOM基础之window对象

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;不渴望力量的哈士奇(哈哥)&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…

监控WebLogic

1.脚本监控weblogic Linux Shell 脚本监控 WebLogic 的运行状态、健康状态、打开的套接字数 通常情况下&#xff0c;我们不建议在脚本中直接明文写入密码。因为这很容易被他人窃取并滥用。 例如&#xff0c;在终端中使用以下命令设置环境变量&#xff1a; export WEBLOGIC_PAS…

ElasticSearch 谈谈你对段合并的策略思想的认识

段合并是Elasticsearch中的一个重要概念&#xff0c;它在数据索引和查询过程中起着关键的作用。Elasticsearch使用Lucene作为其全文搜索库&#xff0c;Lucene中使用的数据结构就是段&#xff08;Segment&#xff09;合并。 段合并的策略思想主要体现在以下几个方面&#xff1a…

算法工程师-机器学习面试题总结(4)

目录 1.常用的距离衡量公式都有哪些&#xff1f;具体说明它们的计算流程&#xff0c;以及使用场景&#xff1f; 2.介绍一下Kd树&#xff1f;如何建树&#xff0c;以及如何搜索最近节点&#xff1f; 3.简单讲解SVM模型原理&#xff1f; 4.SVM为什么会对缺失值敏感&#xff1f…

【7】PyQt布局layout

目录 1. 布局简介 2. 水平布局QHBoxLayout 3. 竖直布局QVBoxLayout 4. 表单布局QFormLayout 5. 布局嵌套 1. 布局简介 一个pyqt窗口中可以有多个控件。所谓布局,指的就是多个控件在窗口中的展示方式 布局方式大致分为: 水平布局竖直布局网格布局表单布局 2. 水平布局Q…

OpenCV-python下载安装和基本操作

文章目录 一、实验目的二、实验内容三、实验过程OpenCV-python的安装与配置python下载和环境配置PIP镜像安装Numpy安装openCV-python检验opencv安装是否成功 openCV-python的基本操作图像输入和展示以及写出openCV界面编程单窗口显示多图片鼠标事件键盘事件滑动条事件 四、实验…

51单片机程序

利用动态扫描和定时器1在数码管上显示出从765432开始以1/10秒的速度往下递减直至765398并保持显示此数&#xff0c;与此同时利用定时器O以500MS速度进行流水灯从土至下移动,当数码管上数减到停止时&#xff0c;实验板上流水灯也停止然后全部开始闪烁&#xff0c;3秒后&#xff…

【Gradle】mac环境安装Gradle及配置

官网安装说明&#xff1a;Gradle | Installation 由于Gradle运行依赖jvm&#xff0c;所以事先需要安装jdk&#xff0c;并确认你的jdk版本和gradle版本要求的对应关系&#xff0c;这个官网上有说明&#xff0c;但是我试了一下不太准确&#xff0c;供参考&#xff0c;链接如下&a…

鸿蒙一出,android开发处境再受重创

华为宣布其自研操作系统鸿蒙HarmonyOSNEXT开发者预览版将不再兼容安卓系统&#xff0c;这一消息引起了广泛关注和热议。这一决策标志着华为正式告别安卓&#xff0c;摆脱了外部的制约&#xff0c;开始着手打造一个全新的生态系统。 鸿蒙系统4发布一个月&#xff0c;截至目前&a…

Apache Flink(七):Apache Flink快速入门 - DataStream BATCH模式

🏡 个人主页:IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 🚩 私聊博主:加入大数据技术讨论群聊,获取更多大数据资料。 🔔 博主个人B栈地址:豹哥教你大数据的个人空间-豹哥教你大数据个人主页-哔哩哔哩视频 下面使用Java代码使用DataStream…

介绍 Apache Spark 的基本概念和在大数据分析中的应用。

Apache Spark 是由 Apache 软件基金会开发的开源框架&#xff0c;帮助在多台计算机上以分布式方式执行计算任务。Spark 提供了一种高度可扩展的计算模型&#xff0c;能够快速地在大规模数据集上进行数据处理和分析。 Spark 有以下几个核心概念&#xff1a; RDD&#xff08;Res…

Apache Ofbiz XML-RPC RCE漏洞复现(CVE-2023-49070)

0x01 产品简介 Apache OFBiz是一个开源的企业资源规划(ERP)系统,提供了多种商业功能和模块。 0x02 漏洞概述 漏洞成因 2020年,为修复 CVE-2020-9496 增加权限校验,存在绕过。2021年,增加 Filter 用于拦截 XML-RPC 中的恶意请求,存在绕过。2023年四月,彻底删除 xmlrp…