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

js 防抖函数 节流函数

news 2026/3/31 12:44:12

某些事件中(如 onresize onscroll onkeydown onkeyup onmousemove …)，会连续触发函数的执行，如果函数执行一些耗时的操作(如请求数据…)，会影响性能，也有可能造成服务器压力。这时可以用 防抖函数 或 节流函数解决这种问题。

防抖函数:

不管事件怎么连接触发函数的执行，我只在事件结束后的N毫秒执行一次函数；如果事件还在连接触发，就不执行函数。

<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8" /><style type="text/css">#box{width:200px;height:200px;border: 1px solid red;}</style>
</head>
<body><div id="box"></div></body>
<script>
function debounce(fn,wait){let timeoutId = null;return function(){let args = arguments;timeoutId && clearTimeout(timeoutId);timeoutId = setTimeout(function(){fn(args);},wait)}
}
function doing(arg){console.log(arg);
}
let fn = debounce(doing,1000);
box = document.getElementById("box");
box.onmousemove = function(){fn(1,2,3);
}
</script>
</html>

效果图：

请添加图片描述

节流函数:

事件在连接触发的过程中，我会隔N毫秒执行一次函数；如果N毫秒内多次触发事件，则只会执行一次函数。

<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8" /><style type="text/css">#box{width:200px;height:200px;border: 1px solid red;}</style>
</head>
<body><div id="box"></div></body>
<script>
function throttle(fn,wait){let timeoutId = null;return function(){let args = arguments;let now = Date.now();if(!timeoutId){timeoutId = setTimeout(function(){timeoutId = null;fn(args);},wait)}}
}function doing(arg){console.log(arg);
}
let fn = throttle(doing,1000);
box = document.getElementById("box");
box.onmousemove=function(){fn(1,2,3);
}
</script>
</html>

效果图：

请添加图片描述

自己体会一下 防抖函数 和 节流函数 的区别吧。
可以根据 效果图 体会体会。
体会不明白的，自己去写一下，运行试试了。

防抖函数的应用场景：建议百度一下。懒得写。
节流函数的应用场景：建议百度一下。懒得写。

---- 结束 ----
仅学习。

相关文章：

js 防抖函数 节流函数

某些事件中(如 onresize onscroll onkeydown onkeyup onmousemove …)&#xff0c;会连续触发函数的执行&#xff0c;如果函数执行一些耗时的操作(如请求数据…)&#xff0c;会影响性能&#xff0c;也有可能造成服务器压力。这时可以用 防抖函数 或 节流函数解决这种问题。 防…...

编程日记 2023/2/20 5:55:04

Yarn节点unhealthy解决办法

这几天用Spark计算任务时&#xff0c;发现yarn上有两个节点不参与计算&#xff0c;很是tm的离谱。使用下面的命令查看Yarn上的nodemanager节点状态yarn node -list -all发现两个节点处于unhealthy状态。经过Google查明原因&#xff1a;这种情况一般是因为那个节点上HDFS文件过多…...

编程日记 2023/2/20 5:52:43

【jumpServer 功能梳理】

用户管理 1.1 用户列表 创建jumpServe 账号 ;角色分为用户 管理员&#xff1b;更新账号信息&#xff1b;查看用户详情以及授权的资产&#xff1b; 1.2 用户组 用户组&#xff0c;这个组的意义在于用一个统称对接资源&#xff1b;用户组包含多个用户&#xff0c;可以操作增加删除…...

编程日记 2023/2/20 5:51:37

中国各省人力资本测算就业人员受教育程度构成（2000-2021年）

数据来源&#xff1a;自主整理 时间跨度&#xff1a;2000-2021年 区域范围&#xff1a;全国各省 指标说明&#xff1a; 人力资本测算公式&#xff1a;&#xff08;小学*6初中*9高中*12大专及以上*16&#xff09;/六岁及以上人口 参考文献&#xff1a; [1]罗仁福, 刘承芳,…...

编程日记 2023/2/20 5:50:32

java面试题-集合篇

Collection1.Collection有哪些类&#xff1f;Java集合框架中的Collection接口是所有集合类的基础接口&#xff0c;定义了一些基本的集合操作&#xff0c;如添加元素、删除元素、判断是否包含某个元素等。常见的集合类包括List、Set和Queue。ListList接口定义了按照索引访问和操…...

编程日记 2023/2/20 5:49:24

Python 异步: 同时运行多个协程（10）

asyncio 的一个好处是我们可以同时运行许多协程。这些协同程序可以在一个组中创建并存储&#xff0c;然后同时一起执行。这可以使用 asyncio.gather() 函数来实现。 让我们仔细看看。 1. 什么是 Asyncio gather() asyncio.gather() 模块函数允许调用者将多个可等待对象组合在一…...

编程日记 2023/2/20 5:48:17

SVN 获取多版本间的更新内容

文章目录背景介绍操作步骤 - 获取某段时间内的代码更新内容背景介绍 公司有个项目期初明确要做微信小程序&#xff0c;没有做其他端的意向&#xff0c;并且当时团队人数有限&#xff0c;没有项目实践过 uniapp&#xff0c;项目时间周期紧&#xff0c;就没有用 uniapp 去实现 然…...

编程日记 2023/2/20 5:47:11

c++ const使用说明

作⽤ 1. 修饰变量&#xff0c;说明该变量不可以被改变&#xff1b; 2. 修饰指针&#xff0c;分为指向常量的指针和指针常量&#xff1b; 3. 常量引⽤&#xff0c;经常⽤于形参类型&#xff0c;即避免了拷⻉&#xff0c;⼜避免了函数对值的修改&#xff1b; 4. 修饰成员函数…...

编程日记 2023/2/20 5:46:03

VSTO 开发 EXCEL 委托与多线程的极简示例

VSTO 开发 EXCEL 委托与多线程的极简示例问题解决步骤代码问题 这几天做 excel 加载项时遇到一个问题&#xff0c;对话框弹窗显示后&#xff0c;需要等待网络数据的返回来填充 ListBox 控件&#xff0c;由于网络延迟问题&#xff0c;整个窗体连带 Excel 一起白屏卡顿 5-10秒&a…...

编程日记 2023/2/20 5:44:58

spring之使用Spring的AOP

文章目录前言一、准备工作1、添加相应的依赖2、添加相应的命名空间3、创建目标类4、创建切面二、使用AOP1.在切面类中编写增强代码以及切点表达式2、开启aspectj的自动代理3、测试类4、测试结果前言 Spring对AOP的实现包括以下三种方式 1、Spring框架结合AspectJ框架实现的AOP…...

编程日记 2023/2/20 5:43:51

LeetCode LCP 66. 最小展台数量

力扣嘉年华将举办一系列展览活动&#xff0c;后勤部将负责为每场展览提供所需要的展台。 已知后勤部得到了一份需求清单&#xff0c;记录了近期展览所需要的展台类型&#xff0c; demand[i][j] 表示第 i 天展览时第 j 个展台的类型。 在满足每一天展台需求的基础上&#xff0c;…...

编程日记 2023/2/20 5:42:46

设计模式之模板方法模式

什么是模板方法模式 模板方法模式定义了一个操作中算法的框架&#xff0c;而将一些步骤延迟到子类中&#xff0c;使得子类可以不改变一个算法的结构就可以重定义该算法的某些特定步骤。     模板方法模式主要包含几下几个角色&#xff1a;         AbstractClass(抽…...

编程日记 2023/4/1 9:30:41

Python数据挖掘基础

一、Matplotlib 画二维图表的python库&#xff0c;实现数据可视化 &#xff0c; 帮助理解数据&#xff0c;方便选择更合适的分析方法1、折线图1.1引入matplotlibimport matplotlib.pyplot as plt %matplotlib inlineplt.figure() plt.plot([1, 0, 9], [4, 5, 6]) plt.show()1.2…...

编程日记 2023/2/20 5:40:32

Go基础-函数

文章目录1 定义2 参数的写法3 返回值的写法4 空白符1 定义 函数是将输入数据通过一系列算法运算之后&#xff0c;输出对应的结果。函数一般都是一些特定的功能块&#xff0c;实现某一种功能的封装&#xff0c;降低代码的冗余性 语法 // 关键字 函数名 函数参数 返…...

编程日记 2023/2/20 5:39:24

AC的改进算法——TRPO、PPO

两类AC的改进算法 整理了动手学强化学习的学习内容 1. TRPO 算法&#xff08;Trust Region Policy Optimization&#xff09; 1.1. 前沿 策略梯度算法即沿着梯度方向迭代更新策略参数 。但是这种算法有一个明显的缺点&#xff1a;当策略网络沿着策略梯度更新参数&#xff0c…...

编程日记 2023/2/20 5:38:18

【C++学习】list的使用及模拟实现

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《C学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; list的使用及模拟实现&#x1f63c;构造函数&#x1f435;模拟实现&#x1f63c;迭代器&#x1f435;…...

编程日记 2023/2/20 5:37:13

动态规划专题精讲1

致前行的人&#xff1a; 要努力&#xff0c;但不要着急&#xff0c;繁花锦簇&#xff0c;硕果累累都需要过程&#xff01; 前言&#xff1a; 本篇文章为大家带来一种重要的算法题&#xff0c;就是动态规划类型相关的题目&#xff0c;动态规划类的题目在笔试和面试中是考察非常高…...

编程日记 2023/2/20 5:36:07

PPO（proximal policy optimization）算法

博客写到一半发现有篇讲的很清楚&#xff0c;直接化缘了 https://www.jianshu.com/p/9f113adc0c50 Policy gradient 强化学习的目标&#xff1a;学习到一个策略πθ(a∣s)\pi\theta(a|s)πθ(a∣s)来最大化期望回报。 一种直接的方法就是在策略空间中直接搜索来得到最优策略&…...

编程日记 2023/2/20 5:35:01

ElasticSearch基本使用

title: ElasticSearch基本使用 date: 2022-08-29 00:00:00 tags: ElasticSearch基本使用 categories:ElasticSearch 基本概念 随着ES版本的升级&#xff0c;文中有些概念可能已经废弃。 索引词(term) 一个能够被索引的精确值&#xff0c;区分大小写&#xff0c;可以通过term查…...

编程日记 2023/2/20 5:33:53

windows微软商店下载应用失败/下载故障的解决办法；如何在网页上下载微软商店的应用

一、问题背景 设置惠普打印机时&#xff0c;需要安装hp smart&#xff0c;但是官方只提供微软商店这一下载渠道。 点击安装HP Smart&#xff0c;确定进入微软商店下载。 完全加载不出来&#xff0c;可能是因为开了代理。 把代理关了&#xff0c;就能正常打开了。 但是点击“…...

编程日记 2023/2/20 5:32:48

LoRA训练助手入门解析：为什么权重排序对LoRA训练效果影响显著

LoRA训练助手入门解析&#xff1a;为什么权重排序对LoRA训练效果影响显著 1. 认识LoRA训练助手 如果你正在尝试训练自己的AI绘画模型&#xff0c;可能会遇到一个常见问题&#xff1a;为什么同样的图片&#xff0c;用不同的标签训练出来的效果差距那么大&#xff1f;这就是我们…...

编程新知 2026/3/31 12:19:39

在MATLAB中调用与可视化Lingbot-Depth-Pretrain-ViTL-14的深度估计结果

在MATLAB中调用与可视化Lingbot-Depth-Pretrain-ViTL-14的深度估计结果 对于很多从事计算机视觉、机器人或者测绘相关研究的工程师和学者来说&#xff0c;深度估计是一个基础又关键的任务。它能从一张普通的二维图片中&#xff0c;推测出每个像素点距离相机的远近&#xff0c;…...

编程新知 2026/3/31 11:47:21

英雄联盟自动化助手：提升游戏效率的全方位解决方案

英雄联盟自动化助手&#xff1a;提升游戏效率的全方位解决方案 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League Akari作为一…...

编程新知 2026/3/31 10:38:53

忍者绘卷Z-Image Turbo新手避坑：3个技巧搞定负向提示词

忍者绘卷Z-Image Turbo新手避坑&#xff1a;3个技巧搞定负向提示词 1. 负向提示词在忍者绘卷中的特殊价值 在忍者绘卷Z-Image Turbo这个专为二次元/火影忍者风格优化的AI绘画工具中&#xff0c;负向提示词扮演着"封印术"般的角色。它不仅仅是简单的排除列表&#x…...

编程新知 2026/3/31 10:32:45

FPGA网络加速入门：拆解Xilinx 7系列GTP与1G/2.5G Ethernet PCS/PMA IP核，搞懂SGMII接口那些事

FPGA网络加速实战&#xff1a;从Xilinx GTP架构到SGMII接口的深度解析 在FPGA高速通信领域&#xff0c;以太网接口设计一直是工程师面临的核心挑战之一。当我们需要在Xilinx 7系列FPGA上实现1G/2.5G以太网功能时&#xff0c;GTP收发器与PCS/PMA IP核的配置往往成为项目成败的关…...

编程新知 2026/3/31 10:04:22

避坑指南：在K210上跑人脸68关键点，这些细节让你的疲劳检测更准

K210人脸疲劳检测实战&#xff1a;68关键点调优与工程化避坑指南 当你在车载监控或工业安全场景部署基于K210的疲劳检测系统时&#xff0c;是否遇到过这些情况&#xff1f;明明按照开源代码跑通了68关键点检测&#xff0c;但实际场景中闭眼判断总是不准&#xff1b;白天阳光直射…...

编程新知 2026/3/31 9:18:01

终极Chromium性能优化方案：Thorium浏览器让你的上网体验快如闪电

终极Chromium性能优化方案&#xff1a;Thorium浏览器让你的上网体验快如闪电 【免费下载链接】thorium Chromium fork named after radioactive element No. 90. Windows and MacOS/Raspi/Android/Special builds are in different repositories, links are towards the top of…...

编程新知 2026/3/31 8:39:46

2026年全国青少年信息素养大赛算法应用主题赛（C++赛项初赛模拟卷3：文末附答案）

2026年全国青少年信息素养大赛算法应用主题赛&#xff08;C赛项初赛模拟卷3&#xff1a;文末附答案&#xff09; 一、单选题 在C中&#xff0c;以下哪个关键字用于定义一个整型变量&#xff1f; A. int B. float C. char D. double 一支商队从长安出发&#xff0c;每天行进80里…...

编程新知 2026/3/31 8:21:37

像素幻梦效果对比：原生FLUX.1-dev vs 像素幻梦定制版输出质量分析

像素幻梦效果对比&#xff1a;原生FLUX.1-dev vs 像素幻梦定制版输出质量分析 1. 引言 在数字艺术创作领域&#xff0c;像素艺术因其独特的复古美感和现代应用价值而备受关注。Pixel Dream Workshop&#xff08;像素幻梦&#xff09;作为基于FLUX.1-dev模型构建的专业像素艺术…...

编程新知 2026/3/31 8:17:31

别再只用Wireshark了！用Cain Abel在Windows上5分钟复现ARP欺骗攻击（附实战截图）

从Wireshark到Cain & Abel&#xff1a;用经典工具5分钟掌握ARP欺骗核心原理 如果你已经能用Wireshark分析网络流量&#xff0c;却对ARP欺骗的原理一知半解&#xff0c;那么这款诞生于2002年的老牌工具Cain & Abel会让你眼前一亮。不同于现代抓包工具的被动观察&#xf…...

编程新知 2026/3/31 7:35:23