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

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

news 2026/2/4 0:59:16

文章目录

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

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

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

Blazor前后端框架Known-V1.2.14

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

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

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

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

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

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

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

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

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

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

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

泛型的学习

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

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

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

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

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

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

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

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

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

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

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

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的水电缴费系统

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

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

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

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

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

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

目录数组名的理解使用指针访问数组一维数组传参的本质二级指针指针数组指针数组模拟二维数组数组名的理解在上⼀个章节我们在使用指针访问数组的内容时，有这样的代码： 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 垂直表头

效果如下： 代码如下： <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

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

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

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

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

硬件连接从硬件原理图中可以看出，rtc时钟芯片挂载在i2c3总线上，设备地址需要查看芯片数据手册。编写设备树 &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

华为云AI开发平台ModelArts

华为云ModelArts：重塑AI开发流程的“智能引擎”与“创新加速器”！ 在人工智能浪潮席卷全球的2025年，企业拥抱AI的意愿空前高涨，但技术门槛高、流程复杂、资源投入巨大的现实，却让许多创新构想止步于实验室。数据科学家…...

编程新知 2026/2/3 13:51:04

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局：PCB行业的时代之问在数字经济蓬勃发展的浪潮中，PCB（印制电路板）作为 “电子产品之母”，其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透，PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2026/1/26 20:38:50

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业，项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升，传统的管理模式已经难以满足现代工程的需求。过去，许多企业依赖手工记录、口头沟通和分散的信息管理，导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2026/1/25 14:27:52

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案，允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。概念解析 Module Federation (模块联邦) Modul…...

编程新知 2026/1/31 13:48:37