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

学习笔记(16)函数防抖和节流

JavaScript 中的函数防抖(Debounce)和函数节流(Throttle)是两种优化频繁触发事件回调函数执行的技术,它们主要用于限制函数调用的频率,尤其是在处理高频率触发且响应开销较大的用户交互场景时。

函数防抖 (Debounce)
防抖函数的主要作用是在连续快速触发事件后,只有当事件停止触发一段时间(通常是最后一次触发后的指定间隔)才会执行一次回调。这种策略确保了在短时间内大量重复触发同一事件的情况下,只会执行一次实际操作。例如,在搜索框输入实时查询的场景下,我们不希望用户每输入一个字符就发送一次请求,而是等用户停止输入一段时间后再发起请求。

简单实现防抖函数的方式是通过设置一个定时器,每次事件触发时清除上一次的定时器,并重新设定一个新的定时器,这样只有最后一次触发事件后的等待期满才真正执行函数。

<style>
.input {margin: 20px;
}#result {height: 150px;line-height: 150px;text-align: center;color: #081ee6e5;background-color: #cccccc;font-size: 80px;
}
</style>
<div class="input">文本内容<input type="text" oninput="handleInput()" id="input">
</div>
<div id="result"></div><script>let inputVal = '';function handleInput() {inputVal = document.getElementById("input").value;// console.log(inputVal)let resultVal = document.getElementById("result");resultVal.innerHTML = inputVal;}function debounce(cont, wait) {let timeout = null;return function () {if (timeout) {clearTimeout(timeout);}timeout = setTimeout(() => {cont.apply(this);}, wait)}}document.getElementById("input").oninput = debounce(handleInput, 1000);</script>

函数节流 (Throttle)
函数节流则保证在一定时间内只执行一次函数,即使这段时间内事件被多次触发。不同于防抖的是,节流函数会按照固定的时间间隔去执行,而不仅仅关注事件是否还在持续触发。这对于那些需要维持一定频率更新而又不想过于频繁的情况非常有用,比如滚动事件监听、窗口大小改变时重新计算布局等。

简单的节流函数实现可以使用定时器加上标志位来控制函数执行:

<div id="content2">机器学习是人工智能的一个分支,它主要基于计算机科学,旨在使计算机系统能够自动地从经验和数据中进行学习并改进, 而无需进行明确的编程。机器学习算法通过构建模型来处理和分析大量数据,以便能够识别模式、进行预测、做出决策或进行其他类型的分析。
</div>
<script>let num2 = 1;let content2 = document.getElementById("content2");function handleView() {// content2.innerHTML = num2++;console.log('第' + num2++ + '次触发节流');}content2.onmousemove = handleView;function throttle(cont2, wait) {let timeout;return function () {if (!timeout) {timeout = setTimeout(() => {timeout = null;cont2.apply(this);}, wait)}}}content2.onmousemove = throttle(handleView, 1000);</script>

总结来说,防抖是将多次执行变为最后一次执行,节流是将多次执行变为每隔一段时间执行。这两种技术都能有效避免因为频繁调用函数而导致的性能问题。

相关文章:

学习笔记(16)函数防抖和节流

JavaScript 中的函数防抖&#xff08;Debounce&#xff09;和函数节流&#xff08;Throttle&#xff09;是两种优化频繁触发事件回调函数执行的技术&#xff0c;它们主要用于限制函数调用的频率&#xff0c;尤其是在处理高频率触发且响应开销较大的用户交互场景时。 函数防抖 …...

【揭秘】空号检测平台挑选秘籍:让每一分钱都花在“刀刃”上

在数字化营销时代&#xff0c;精准的数据是企业制胜的关键。而空号检测平台作为数据清洗的重要工具&#xff0c;其选择的正确与否直接影响到营销效果与成本效益。如何在众多平台中慧眼识珠&#xff0c;找到最适合自己的“黄金搭档”&#xff1f;今天&#xff0c;就跟着企讯通一…...

Linux源码包安装

目录 一、transmission源码包安装 二、 nginx源码包安装 一、transmission源码包安装 1、下载编译环境所需的软件包依赖 2、下载transmision源码包到用户主目录下 https://github.com/transmission/transmission/releases/download/4.0.5/transmission-4.0.5.tar.xz 3、解压…...

【P1328】[NOIP2014 提高组] 生活大爆炸版石头剪刀布

[NOIP2014 提高组] 生活大爆炸版石头剪刀布 题目背景 NOIP2014 提高组 D1T1 题目描述 石头剪刀布是常见的猜拳游戏&#xff1a;石头胜剪刀&#xff0c;剪刀胜布&#xff0c;布胜石头。如果两个人出拳一样&#xff0c;则不分胜负。在《生活大爆炸》第二季第 8 集中出现了一种…...

查看k8s中的secret

kubectl get secret xxx -o yaml -n xxxx参考&#xff1a; Managing Secrets using kubectl...

[深度学习]yolov8+pyqt5搭建精美界面GUI设计源码实现五

【简单介绍】 依托先进的目标检测算法YOLOv8与灵活的PyQt5界面开发框架&#xff0c;我们倾力打造出了一款集直观、易用与功能强大于一体的目标检测GUI界面软件。通过深度融合YOLOv8在目标识别领域的出色性能与PyQt5的精美界面设计&#xff0c;我们成功推出了一款高效且稳定的软…...

C# get set 访问器

在C#中get 访问器set 访问器属性的优势例子 在C#中 get 和 set 是访问器&#xff08;accessors&#xff09;的关键词&#xff0c;它们用于定义属性的读取和写入行为。属性是一种特殊的类成员&#xff0c;它提供了对字段&#xff08;field&#xff09;或计算结果的灵活访问。 …...

【OpenGL】使用 python + Qt + OpenGL 的现代渲染

伴随资源 目录 一、说明二、 PyQt4三、PyOpenGL四、OpenGL 管线五、Python集成开发环境5.1 Emacs配置5.2 pycharm环境 六、你好&#xff0c;OpenGL&#xff01;七、QGL控件八、平截头体.svg九、定义几何9.1 立即模式与保留模式9.2 使用 VBO 定义 Cube 十、渲染立方体十一、渲…...

vlan、三层交换机、网关、DNS、子网掩码、MAC地址详解

vlan、三层交换机、网关、DNS、子网掩码、MAC地址详解 一、 什么是VLAN&#xff1f; VLAN中文是“虚拟局域网”。 ​ LAN可以是由少数几台家用计算机构成的网络&#xff0c;也可以是数以百计的计算机构成的企业网络。 ​ VLAN所指的LAN特指使用路由器分割的网络——也就是广…...

嵌入式|蓝桥杯STM32G431(HAL库开发)——CT117E学习笔记11:数字电位器MCP4017

系列文章目录 嵌入式|蓝桥杯STM32G431&#xff08;HAL库开发&#xff09;——CT117E学习笔记01&#xff1a;赛事介绍与硬件平台 嵌入式|蓝桥杯STM32G431&#xff08;HAL库开发&#xff09;——CT117E学习笔记02&#xff1a;开发环境安装 嵌入式|蓝桥杯STM32G431&#xff08;…...

CTF题型 nodejs(1) 命令执行绕过典型例题

CTF题型 nodejs(1) 命令执行绕过 文章目录 CTF题型 nodejs(1) 命令执行绕过一.nodejs中的命令执行二.nodejs中的命令绕过1.编码绕过2.拼接绕过3.模板字符串4.Obejct.keys5.反射6.过滤中括号的情况典型例题1.[GFCTF 2021]ez_calc2.[西湖论剑 2022]Node Magical Login 一.nodejs中…...

Mybatis在SpringBoot中是如何被加载执行

首先依赖于springboot的自动装配EnableAutoConfiguration注解&#xff0c;这个注解最终帮助我们读取mybatis-spring-boot-autoconfigure-x.x.x.jar中的META-INF\spring.factories配置类&#xff1a; org.springframework.boot.autoconfigure.EnableAutoConfiguration\ org.myb…...

数据采集用,集成了主流工业通讯协议

IoTClient 是一个物联网设备通讯协议实现客户端&#xff0c;集成了主流工业通讯协议&#xff0c;包括主流PLC通信读取、ModBus协议、Bacnet协议等。该组件基于.NET Standard 2.0&#xff0c;适用于.NET的跨平台开发&#xff0c;可在Windows、Linux等系统上运行&#xff0c;甚至…...

Django(三)-搭建第一个应用(2)

一、编写更多视图 问题详情页——展示某个投票的问题和不带结果的选项列表。问题结果页——展示某个投票的结果。投票处理器——用于响应用户为某个问题的特定选项投票的操作。 # 1.问题详情页&#xff1a;展示某个投票的问题和不带结果的选项列表 def detail(request,questi…...

求助:配置脚手架代理,跨域问题proxyTable配置无效,访问后显示404?

已经在这里卡了一天了。找了很多解决办法&#xff0c;比如重启&#xff0c;修改proxytable等等&#xff0c;但是每次但是404&#xff0c;求助各位大佬&#xff0c;怎么解决&#xff1f; 1、代码 &#xff08;1&#xff09;config的index.js &#xff08;2&#xff09; App.v…...

【4月】组队打卡《山有木Python特征工程极简入门》

活动名称 CDA Club 第2期《山有木兮Python数据分析极简入门》组队打卡 活动介绍 本次打卡活动由CDA俱乐部旗下学术部主办。目的是通过数据分析科普内容&#xff0c;为数据分析爱好者提供学习和交流的机会。方便大家利用碎片化时间在线学习&#xff0c;以组队打卡的形式提升学…...

Wireshark 抓包

启动时选择一个有信号的网卡双击打开&#xff0c;或者在 捕获选择里打开选择网卡。 然后输出下面的规则就可以抓到报文了。 最上面的三条是建立连接时的三次握手&#xff0c; 下面是发送数据hello 对应两条数据 最下面的4条是断时的4次挥手...

c语言运算符优先级

1、运算符介绍 在C语言中&#xff0c;运算符优先级是指在表达式中执行运算的先后顺序。按照C语言的标准规范&#xff0c;不同的运算符被赋予了不同的优先级等级&#xff0c;优先级高的运算符会先进行运算。如果同一优先级的运算符出现在同一个表达式中&#xff0c;则按照从左到…...

纳斯达克大屏媒体尺寸与投放费用:一次投放需要多少钱?

纳斯达克大屏媒体尺寸与投放费用&#xff1a;一次投放需要多少钱&#xff1f; 1. 纳斯达克图片要求 1.1 像素要求 高度&#xff1a;2336 像素宽度&#xff1a;1832 像素 1.2 分辨率要求 像素比率&#xff1a;1.0 px 72 dpi 1.3 文件格式要求 静态图片格式&#xff1a;.…...

将word转为PDF的几种简单方式

第一种&#xff1a;使用spire.doc.jar包&#xff0c;用时7秒左右。 引入spire.doc-11.1.1.jar包&#xff0c;该包带水印&#xff0c;建议使用免费版的spire.doc.free-5.2.0.jar&#xff0c;免费版只能转三页。 package web.tools.excel; import com.spire.doc.*; public cl…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...