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

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

news 2026/4/3 14:47:45

文章目录

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

如何用Venera打造个性化漫画阅读体验？

如何用Venera打造个性化漫画阅读体验&#xff1f; 【免费下载链接】venera A comic app 项目地址: https://gitcode.com/gh_mirrors/ve/venera 你是否曾经感到市面上的漫画阅读应用千篇一律&#xff0c;界面设计缺乏个性&#xff1f;或者希望在深夜阅读时&#xff0c;应…...

编程新知 2026/4/3 14:23:45

实战演练：基于快马平台快速构建一个电商客服对话agent系统

今天想和大家分享一个实战项目&#xff1a;如何在InsCode(快马)平台快速搭建一个电商客服对话agent系统。这个项目特别适合想体验AI对话系统开发的朋友&#xff0c;整个过程不需要复杂的配置&#xff0c;半小时就能看到效果。 需求分析 电商客服系统最核心的功能就是处理用户的…...

编程新知 2026/4/3 12:42:35

Translumo：跨场景实时翻译解决方案的技术实践与应用指南

Translumo&#xff1a;跨场景实时翻译解决方案的技术实践与应用指南 【免费下载链接】Translumo Advanced real-time screen translator for games, hardcoded subtitles in videos, static text and etc. 项目地址: https://gitcode.com/gh_mirrors/tr/Translumo 语言障…...

编程新知 2026/4/3 11:03:41

OpenClaw数据清洗神器：Qwen3-14b_int4_awq智能修复CSV文件异常值

OpenClaw数据清洗神器&#xff1a;Qwen3-14b_int4_awq智能修复CSV文件异常值 1. 为什么需要智能数据清洗 作为经常处理实验数据的科研狗&#xff0c;我每天至少要花2小时在数据清洗上。上周处理一组气候观测数据时&#xff0c;发现某个气象站的温度记录里混入了几个"999…...

编程新知 2026/4/3 10:27:17

3大维度解析Source Han Serif CN如何重塑中文字体应用生态

3大维度解析Source Han Serif CN如何重塑中文字体应用生态 【免费下载链接】source-han-serif-ttf Source Han Serif TTF 项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf 价值解析&#xff1a;从商业、技术、设计维度重新定义开源字体价值 商业价值…...

编程新知 2026/4/3 10:01:00

Qwen3.5-9B-AWQ-4bit多场景应用：法律合同截图关键条款提取+风险提示生成

Qwen3.5-9B-AWQ-4bit多场景应用&#xff1a;法律合同截图关键条款提取风险提示生成 1. 法律合同处理的痛点与解决方案 在法律实务工作中&#xff0c;合同审查是一项高频且重要的工作。传统方式下&#xff0c;律师需要&#xff1a; 逐页阅读纸质或电子版合同手动标记关键条款…...

编程新知 2026/4/3 9:50:56

Dankoe新作《使命与收益》读书笔记10｜自我变现：如何将自我发展转化为值得付费的价值

大多数创业者的剧本都写好了&#xff1a;找个“有前景”的利基市场&#xff0c;学技能、做调研、磨产品&#xff0c;最后硬着头皮销售。 听起来很合理&#xff0c;对吧&#xff1f;&#xff08;利基市场 Niche的音译大企业看不上、懒得做、吃不下的小众细分市场&#xff09; …...

编程新知 2026/4/3 9:44:54

5分钟快速部署：如何将手机摄像头变为电脑摄像头终极指南

5分钟快速部署&#xff1a;如何将手机摄像头变为电脑摄像头终极指南 【免费下载链接】droidcam GNU/Linux/nix client for DroidCam 项目地址: https://gitcode.com/gh_mirrors/dr/droidcam 想让闲置的安卓手机变身高清电脑摄像头吗&#xff1f;DroidCam正是你需要的免费…...

编程新知 2026/4/3 9:14:04

如何通过抖音批量下载工具实现高效内容管理与分析

如何通过抖音批量下载工具实现高效内容管理与分析 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support. 抖音批量下载…...

编程新知 2026/4/3 8:43:26

Nginx从专家到小白

文章目录主要用途Nginx 本地路径映射 HTTP 服务搭建文档一、环境信息二、安装步骤2.1 下载 Nginx2.2 解压安装三、配置说明3.1 配置文件路径3.2 完整配置内容3.3 配置项说明四、常用命令4.1 启动 Nginx4.2 停止 Nginx4.3 重新加载配置4.4 查看进程状态4.5 查看端口监听4.6 测试…...

编程新知 2026/4/3 8:14:56