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

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

news 文章来源：https://blog.csdn.net/weixin_53791978/article/details/132673597 2025/5/14 20:08:15

文章目录

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

【微信小程序篇】- 多环境（版本）配置

最近自己在尝试使用AIGC写一个小程序&#xff0c;页面、样式、包括交互函数AIGC都能够帮我完成(不过这里有一点问题AIGC的上下文关联性还是有限制&#xff0c;会经常出现对于需求理解跑偏情况&#xff0c;需要不断的重复强调&#xff0c;并纠正错误&#xff0c;才能得到你想要的…...

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

ssh配置（一、GitLabGitHub）

一. 为什么配置ssh 使用 ssh 克隆项目&#xff0c;更加安全方便。 git clone 项目时一般使用两种协议 https 和 ssh 。 二. 原理的通俗解释 ssh 解决的问题是登录时的用户身份验证问题&#xff0c;默认使用 RSA&#xff08;也支持其他算法&#xff1a; RSA、DSA、ECDSA、EdD…...

编程日记 2023/9/5 23:59:03

开了抖店后就可以直播带货了吗？想在抖音带货的，建议认真看完！

我是王路飞。 关于抖店和直播带货的关系&#xff0c;其实很多人经常搞不清楚。 不然的话&#xff0c;也不会有这个问题的出现了&#xff1a;开了抖店后就可以直播带货了吗&#xff1f; 在我看来&#xff0c;这个问题很简单&#xff0c;但在不了解抖音电商和直播带货其中门道…...

编程日记 2023/9/5 23:58:02

【深度学习实验】数据可视化

目录 一、实验介绍 二、实验环境 三、实验内容 0. 导入库 1. 归一化处理 归一化 实验内容 2. 绘制归一化数据折线图 报错 解决 3. 计算移动平均值SMA 移动平均值 实验内容 4. 绘制移动平均值折线图 5 .同时绘制两图 6. array转换为tensor张量 7. 打印张量 一、…...

编程日记 2023/9/5 23:57:01

【Golang】函数篇

1、golang函数基本定义与使用 func 函数名 (形参列表) (返回值类型列表) {函数体return 返回值列表 }其中func用于表明这是一个函数&#xff0c;剩下的东西与其他语言的函数基本一致&#xff0c;在定义与使用的时候注意函数名、参数、返回值书写的位置即可。下面使用一个例子…...

编程日记 2023/9/5 23:56:00

在ubuntu上安装ns2和nam(ubuntu16.04)

在ubuntu上安装ns2和nam 版本选择安装ns2安装nam 版本选择 首先&#xff0c;版本的合理选择可以让我们避免很多麻烦 经过测试&#xff0c;ubuntu的版本选择为ubuntu16.04&#xff0c;ns2的版本选择为ns-2.35&#xff0c;nam包含于ns2 资源链接(百度网盘) 链接:https://pan.bai…...

编程日记 2023/9/5 23:54:58

SpringCloudAlibaba之Sentinel介绍

文章目录 1 Sentinel1.1 Sentinel简介1.2 核心概念1.2.1 资源1.2.2 规则 1.3 入门Demo1.3.1 引入依赖1.3.2 集成Spring1.3.3 Spring中资源规则 1.4 Sentinel控制台1.5 核心原理1.5.1 NodeSelectorSlot1.5.2 ClusterBuilderSlot1.5.3 LogSlot1.5.4 StatisticSlot1.5.5 Authority…...

编程日记 2023/9/5 23:53:57

苹果微信聊天记录删除了怎么恢复？果粉原来是这样恢复的

粗心大意删除了微信聊天记录&#xff1f;有时候&#xff0c;一些小伙伴可能只是想要删除一部分聊天记录&#xff0c;但是在进行批量删除时&#xff0c;不小心勾选到了很重要的对话&#xff0c;从而导致记录丢失。 如果这时想找回聊天记录该怎么办&#xff1f;微信聊天记录删除…...

编程日记 2023/9/5 23:52:56

JVM的故事——虚拟机字节码执行引擎

虚拟机字节码执行引擎 文章目录 虚拟机字节码执行引擎一、概述二、运行时栈帧结构三、方法调用 一、概述 执行引擎Java虚拟机的核心组成之一&#xff0c;它是由软件自行实现的&#xff0c;能够执行那些不被硬件直接支持的指令集格式。 对于不同的虚拟机实现&#xff0c;执行引…...

编程日记 2023/9/5 23:51:55

设计模式之适配器与装饰器

目录 适配器模式 简介 角色 使用 优缺点 使用场景 装饰器模式 简介 优缺点 模式结构 使用 使用场景 适配器模式 简介 允许将不兼容的对象包装成一个适配器类&#xff0c;使得其他类可以通过适配器类与原始对象进行交互&#xff0c;从而提高兼容性 角色 目标角色…...

编程日记 2023/9/5 23:50:54