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

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

news 2025/12/12 21:08:19

文章目录

        • 一、防抖 （多次触发 只执行最后一次）
        • 二、节流 （规定时间内 只触发一次）
        • 三、防抖和节流的使用场景
            • 【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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/12/11 16:25:25

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2025/12/9 4:33:58

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2025/12/10 4:33:45

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2025/12/12 18:44:23

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

编程新知 2025/12/12 16:36:53

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

编程新知 2025/7/7 19:44:31

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

编程新知 2025/12/9 3:17:09

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍 传统滑模观测器采用如下结构&#xff1a; 传统SMO中LPF会带来相位延迟和幅值衰减&#xff0c;并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)&#xff0c;可以去除高次谐波&#xff0c;并且不用相位补偿就可以获得一个误差较小的转子位…...

编程新知 2025/12/9 18:34:14

uniapp 集成腾讯云 IM 富媒体消息（地理位置/文件）

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...

编程新知 2025/10/25 5:53:05