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

【js】防抖和节流的使用场景和区别：

news 2026/5/20 7:35:31

文章目录

        • 一、防抖 （多次触发 只执行最后一次）
        • 二、节流 （规定时间内 只触发一次）
        • 三、防抖和节流的使用场景
            • 【1】防抖（debounce）
            • 【2】节流（throttle）

一、防抖 （多次触发 只执行最后一次）

作用： 高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间
防抖类似于英雄联盟回城6秒，如果回城中被打断，再次回城需要再等6秒
在这里插入图片描述

<body><input type="text" id="inp"><script>// 1.封装防抖函数function debounce(fn, time) {// 4.创建一个标记用来存放定时器的返回值let timeout = null;return function () {// 5.每当用户触发input事件  把前一个 setTimeout 清楚掉clearTimeout(timeout);// 6.然后又创建一个新的 setTimeout, 这样就能保证输入字符后等待的间隔内 还有字符输入的话，就不会执行 setTimeout里面的内容timeout = setTimeout(() => {// 7.这里进行防抖的内容fn();}, time);};}// 2.获取inpt元素var inp = document.getElementById('inp');// 8. 测试防抖临时使用的函数function sayHi() {console.log('防抖成功');}// 3.给inp绑定input事件  调用封装的防抖函数  传入要执行的内容与间隔事件 inp.addEventListener('input', debounce(sayHi, 5000)); </script>
</body>

二、节流 （规定时间内 只触发一次）

作用： 高频率触发的事件,在指定的单位时间内，只响应第一次
节流类似于英雄联盟里的英雄平A 一定是内点击多次只进行攻击一次
在这里插入图片描述

    <script>// 1.封装节流函数function throttle(fn, time) {//3. 通过闭包保存一个 "节流阀" 默认为falselet temp = false;return function () {//8.触发事件被调用 判断"节流阀" 是否为true  如果为true就直接trurn出去不做任何操作if (temp) {return;} else {//4. 如果节流阀为false  立即将节流阀设置为truetemp = true; //节流阀设置为true//5.  开启定时器setTimeout(() => {//6. 将外部传入的函数的执行放在setTimeout中fn.apply(this, arguments);//7. 最后在setTimeout执行完毕后再把标记'节流阀'为false(关键)  表示可以执行下一次循环了。当定时器没有执行的时候标记永远是true，在开头被return掉temp = false;}, time);}};}function sayHi(e) {// 打印当前 document 的宽高console.log(e.target.innerWidth, e.target.innerHeight);}// 2.绑定事件，绑定时就调用节流函数  // 敲黑板！！！ 这里是重点 绑定是就要调用一下封装的节流函数 触发事件是触发封装函数内部的函数window.addEventListener('resize', throttle(sayHi, 2000));</script>

三、防抖和节流的使用场景

【1】防抖（debounce）

1.search搜索时，用户在不断输入值时，用防抖来节约请求资源。

【2】节流（throttle）

1.鼠标不断点击触发，mousedown(单位时间内只触发一次)
2.监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

相关文章：

【js】防抖和节流的使用场景和区别：

文章目录 一、防抖 &#xff08;多次触发 只执行最后一次&#xff09;二、节流 &#xff08;规定时间内 只触发一次&#xff09;三、防抖和节流的使用场景【1】防抖&#xff08;debounce&#xff09;【2】节流&#xff08;throttle&#xff09; 一、防抖 &#xff08;多次触发 …...

编程日记 2023/9/6 0:20:30

Blazor前后端框架Known-V1.2.14

V1.2.14 Known是基于C#和Blazor开发的前后端分离快速开发框架&#xff0c;开箱即用&#xff0c;跨平台&#xff0c;一处代码&#xff0c;多处运行。 Gitee&#xff1a; https://gitee.com/known/KnownGithub&#xff1a;https://github.com/known/Known 概述 基于C#和Blazo…...

编程日记 2023/9/6 0:19:29

港陆证券：五日线破位怎么看？

在股票交易中&#xff0c;五日线是个重要的技术指标之一&#xff0c;它能够反映出最近的商场趋势。假如五日线破位&#xff0c;这意味着商场呈现了趋势反转&#xff0c;出资者需求注重趋势改动&#xff0c;并采取相应的出资战略。 首先&#xff0c;咱们来看看五日线破位的原因…...

编程日记 2023/9/6 0:18:27

睿趣科技：抖音小店多久可以做起来

随着社交媒体的迅猛发展&#xff0c;抖音成为了全球最受欢迎的短视频平台之一&#xff0c;吸引了数以亿计的用户。在抖音上&#xff0c;人们不仅可以分享自己的生活、才艺和创意&#xff0c;还可以创业经营抖音小店。但是&#xff0c;很多人都想知道&#xff0c;一个抖音小店到…...

编程日记 2023/9/6 0:17:26

onnx 模型切割掉conv后面的节点，设置输出层名称和最后节点名称一致，设置输出层shape和输出节点一致．

某些模型最后卷积层之后的算子不适合在推理引擎里面跑&#xff0c;切割掉conv后面的算子&#xff0c;在cpu上实现有比较好的性能&#xff0e; 包含&#xff1a; &#xff11;&#xff0e;获取onnx中间节点的shape的示例 &#xff12;&#xff0e;增加onnx模型输出&#xff0c;设…...

编程日记 2023/9/6 0:16:25

泛型的学习

泛型深入 泛型&#xff1a;可以在编译阶段约束操作的数据类型&#xff0c;并进行检查 泛型的格式&#xff1a;<数据类型> 注意&#xff1a;泛型只能支持引用数据类型 //没有泛型的时候&#xff0c;集合如何存储数据//如果我们没有给集合指定类型&#xff0c;默认认为…...

编程日记 2023/9/6 0:15:24

L1-061 新胖子公式(Python实现) 测试点全过

前言&#xff1a; {\color{Blue}前言&#xff1a;} 前言&#xff1a; 本系列题使用的是&#xff0c;“PTA中的团体程序设计天梯赛——练习集”的题库&#xff0c;难度有L1、L2、L3三个等级&#xff0c;分别对应团体程序设计天梯赛的三个难度。更新取决于题目的难度&#xff0c;…...

编程日记 2023/9/6 0:14:23

潜艇来袭（Qt官方案例-2维动画游戏）

一、游戏介绍 1 开始界面 启动程序&#xff0c;进入开始界面。 2 开始新游戏 点击菜单&#xff1a;File》New Game &#xff08;或者CtrlN&#xff09;进入新游戏。 开始新游戏之后&#xff0c;会有一个海底的潜艇&#xff0c;和水面舰艇对战。 计算机&#xff1a;自动控制…...

编程日记 2023/9/6 0:13:22

50ETF期权开户平台（0门槛期权开户指南）

50ETF期权开户平台比较好的有&#xff1a;期权馆&#xff0c;期权科普馆&#xff0c;小熊期权&#xff0c;期权酱&#xff0c;财顺财经&#xff0c;财顺期权等&#xff0c;都是国内前十的期权分仓平台&#xff0c;下文为大家结算50ETF期权开户平台&#xff08;0门槛期权开户指南…...

编程日记 2023/9/6 0:12:20

leaflet · 关于轨迹移动

1.引入 import MovingMarker from "../src/utils/MovingMarker"; 2.MovingMarker.js内容 import L from "leaflet"; import eventBus from ../util/eventBus; L.interpolatePosition function(p1, p2, duration, t) {var k t/duration;k (k > 0) ? …...

编程日记 2023/9/6 0:11:17

学生宿舍水电费自动缴费系统/基于javaweb的水电缴费系统

摘 要 “互联网”的战略实施后&#xff0c;很多行业的信息化水平都有了很大的提升。但是目前很多学校日常工作仍是通过人工管理的方式进行&#xff0c;需要在各个岗位投入大量的人力进行很多重复性工作&#xff0c;这样就浪费了许多的人力物力&#xff0c;工作效率较低&#x…...

编程日记 2023/9/6 0:10:16

机器人中的数值优化（十三）——QP二次规划

本系列文章主要是我在学习《数值优化》过程中的一些笔记和相关思考&#xff0c;主要的学习资料是深蓝学院的课程《机器人中的数值优化》和高立编著的《数值最优化方法》等&#xff0c;本系列文章篇数较多&#xff0c;不定期更新&#xff0c;上半部分介绍无约束优化&#xff0c;…...

编程日记 2023/9/6 0:09:15

语言深入理解指针（非常详细）（三）

目录 数组名的理解使用指针访问数组 一维数组传参的本质二级指针指针数组指针数组模拟二维数组 数组名的理解 在上⼀个章节我们在使用指针访问数组的内容时&#xff0c;有这样的代码&#xff1a; int arr[10] {1,2,3,4,5,6,7,8,9,10}; int *p &arr[0];这里我们使用 &am…...

编程日记 2023/9/6 0:08:14

实训笔记8.31

实训笔记8.31 8.31笔记一、项目开发流程一共分为七个阶段1.1 数据产生阶段1.2 数据采集存储阶段1.3 数据清洗预处理阶段1.4 数据统计分析阶段1.5 数据迁移导出阶段1.6 数据可视化阶段 二、项目数据清洗预处理的实现2.1 清洗预处理规则2.1.1 数据清洗规则2.1.2 数据预处理规则 2…...

编程日记 2023/9/6 0:07:12

el-table 垂直表头

效果如下&#xff1a; 代码如下&#xff1a; <template><div class"vertical_head"><el-table style"width: 100%" :data"getTblData" :show-header"false"><el-table-columnv-for"(item, index) in getHe…...

编程日记 2023/9/6 0:06:11

B081-Lucene+ElasticSearch

目录 认识全文检索概念lucene原理全文检索的特点常见的全文检索方案 Lucene创建索引导包分析图代码 搜索索引分析图代码 ElasticSearch认识ElasticSearchES与Kibana的安装及使用说明ES相关概念理解和简单增删改查ES查询DSL查询DSL过滤 分词器IK分词器安装测试分词器 文档映射(字…...

编程日记 2023/9/6 0:05:10

机器学习：塑造未来的核心力量

着科技的飞速发展&#xff0c;机器学习已经成为我们生活中不可或缺的一部分。无论是搜索引擎、推荐系统&#xff0c;还是自动驾驶汽车和机器人&#xff0c;都依赖于机器学习算法。本文将探讨机器学习的基本概念、应用领域以及未来发展趋势。 一、机器学习的基本概念 机器学习…...

编程日记 2023/9/6 0:04:08

RK3568-i2c-适配8010rtc时钟芯片

硬件连接 从硬件原理图中可以看出&#xff0c;rtc时钟芯片挂载在i2c3总线上&#xff0c;设备地址需要查看芯片数据手册。编写设备树 &i2c3 {status "okay";rx8010: rx801032 {compatible "epson,rx8010";reg <0x32>;}; };使能驱动 /kernel/…...

编程日记 2023/9/6 0:03:08

Spring Security - 基于内存快速demo

基于内存方式 - 只作学习参考1.引入依赖<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>2.login.html、index.html、fail.htmllogin.html:<form method…...

编程日记 2023/9/6 0:02:06

6 | 从文本文件中读取单词并输出不重复的单词列表

Transformation 操作 Transformation 操作是用于从一个 RDD（Resilient Distributed Dataset）创建一个新的 RDD，通常是通过对原始 RDD 的元素进行映射、筛选、分组等操作来实现的。Transformation 操作不会立即执行，而是惰性计算，只有在 Action 操作触发时才会真正执行。以…...

编程日记 2023/9/6 0:01:06

不止于安装：用Docker在5分钟内快速搭建可复用的ROS Noetic开发环境

5分钟构建可移植ROS开发环境&#xff1a;Docker容器化实战指南 在机器人开发领域&#xff0c;环境配置一直是令人头疼的问题。不同项目依赖的ROS版本冲突、系统库不兼容、团队协作时环境不一致…这些痛点消耗着开发者宝贵的时间。传统安装方式就像在主机上直接"装修"…...

编程新知 2026/5/20 5:56:59

接触动力学与CTR-MPC在机器人操作中的应用

1. 接触动力学基础与挑战 接触动力学是机器人操作中的核心问题&#xff0c;它描述了物体间相互作用时的力学行为。想象一下我们用手推动桌面的杯子——指尖与杯壁的接触力既要防止穿透&#xff08;非穿透性约束&#xff09;&#xff0c;又要克服滑动摩擦&#xff08;摩擦锥约束…...

编程新知 2026/5/20 5:01:33

金融公共服务机构钓鱼邮件威胁治理研究 —— 以 NSI 安全事件为例

摘要 英国国家储蓄与投资机构 NS&I 近三年拦截各类恶意邮件 132,126 封&#xff0c;其中垃圾邮件 97,777 封&#xff0c;钓鱼攻击从 1,043 起激增至 4,414 起&#xff0c;呈现总量下降但精准化、AI 化、高危害性显著上升的趋势。作为管理海量公众资金与敏感数据的金融公共服…...

编程新知 2026/5/20 4:28:04

UE材质背后的物理课：从菲涅尔到BRDF，理解PBR渲染的数学与视觉魔法

UE材质背后的物理课&#xff1a;从菲涅尔到BRDF&#xff0c;理解PBR渲染的数学与视觉魔法 当你在虚幻引擎中拖动粗糙度滑块时&#xff0c;是否思考过这个0到1的数值如何精确控制光线在虚拟表面的舞蹈&#xff1f;PBR渲染不是魔法&#xff0c;而是将自然界的光影规律翻译成计算机…...

编程新知 2026/5/20 3:13:21

第6篇：Few-shot与Chain-of-Thought——教会AI如何思考

第6篇&#xff1a;Few-shot与Chain-of-Thought——教会AI如何思考适用人群&#xff1a;进阶→高阶 | 字数&#xff1a;约25,000字 | 预计阅读时间&#xff1a;60分钟前言 前五篇我们花了很多精力教模型"做什么"和"输出成什么样"。但从这一篇开始&#xff0…...

编程新知 2026/5/20 3:06:34

Perplexity症状查询功能突然失效？排查清单来了：从OpenID Connect令牌过期、UMLS MetaMap服务中断到本地缓存污染的6层故障树分析

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;Perplexity症状查询功能突然失效&#xff1f;排查清单来了&#xff1a;从OpenID Connect令牌过期、UMLS MetaMap服务中断到本地缓存污染的6层故障树分析 当Perplexity的症状查询接口返回 401 Unauthorized 或…...

编程新知 2026/5/20 2:16:57

Deepoc 具身智能开发板，解锁更安全高效清扫新体验

在家庭客厅、书房&#xff0c;或是小型商铺、办公室等场景里&#xff0c;地面杂物、低矮家具、墙角缝隙随处可见&#xff0c;布局复杂又不规则。带机械臂的清扫机器人&#xff0c;早已成为不少人解放双手的好帮手&#xff0c;但传统设备在实际使用中&#xff0c;总难避开一些痛…...

编程新知 2026/5/20 1:45:13

终极指南：如何快速上手BOTW-Save-Editor-GUI塞尔达传说存档编辑器

终极指南&#xff1a;如何快速上手BOTW-Save-Editor-GUI塞尔达传说存档编辑器 【免费下载链接】BOTW-Save-Editor-GUI A Work in Progress Save Editor for BOTW 项目地址: https://gitcode.com/gh_mirrors/bo/BOTW-Save-Editor-GUI BOTW-Save-Editor-GUI是一款专为《塞…...

编程新知 2026/5/20 0:16:46

1A,60VIN,1MHz,XZ4116,降压恒流LED驱动芯片 输入电压：5V-60V

产品概述这是一款外围电路简单的连续电流模式的降压型 LED 恒流驱动芯片。在输入电压高于LED电压时可以有效地用于驱动一颗或者多颗串联LED。其输出电流可调&#xff0c;最大可达 1A。适用于 5-60V 电压范围的非隔离式恒流 LED 驱动领域。芯片 内置功率开关管和一个高压电流检测…...

编程新知 2026/5/19 23:52:14

【最新v2.7.5 版本安装包】保姆级一步到位，OpenClaw 零基础无需命令一键部署即能用

&#x1f680; OpenClaw 一键安装包&#xff5c;一键部署甩掉复杂环境配置 【点击下方链接下载最新安装包】 https://xiake.yun/api/download/package/16?promoCodeIVBE1F235167 &#x1f4cc; 适配信息 适配系统&#xff1a;Windows10/11 64 位 当前版本&#xff1a;…...

编程新知 2026/5/19 23:12:21