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

专题 | 防抖和节流

news 文章来源：https://blog.csdn.net/A123ppleQueen/article/details/128984498 2025/1/27 12:27:05

一

防抖：单位时间内，频繁触发事件，只执行最后一次

          场景：搜索框搜索输入（利用定时器，每次触发先清掉以前的定时器，从新开始）

节流：单位时间内，频繁触发事件，只执行一次

         场景：高频事件 快速点击，鼠标滑动、resize事件、scroll事件（利用定时器，等定时器执行完毕，才开启定时器，不用打断）

                  一般用lodash库，利用里面的debounce（防抖）和throttle(节流)来做

二

【前端面试题：防抖与节流（二）】 https://www.bilibili.com/video/BV1ig411u7LG/?share_source=copy_web&vd_source=c1fe9c75396fdc6f65b56d15f5eb00b3

防抖

防抖：用户触发事件过于频繁，只需要最后一次事件的操作

案例一：输入框触发过于频繁 

只想要暴富两字，前面哪些过程不想要把它输出来

 

 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="text"><script>let inp = document.querySelector("input");inp.oninput = function(){console.log(this.value);}</script></body>
</html>

案例二：用定时器解决触发频繁问题

差不多解决了，可以在调整一下时间更完美

 

 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="text"><script>// 防抖方法一  好烦啊，我也不知道是哪些部分不懂，明明拆开我全晓得，烦躁let inp = document.querySelector("input");// t代表的是用户触发的次数let t = null;inp.oninput = function(){if(t !== null){clearTimeout(t);}t = setTimeout(()=>{console.log(this.value);},500)}</script></body>
</html>

案例三：用debounce解决触发频繁问题

案例二的代码据说是一团垃圾，因为业务逻辑和什么混在一起了，所以下面用闭包封的更好些

 

 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="text"><script>// 防抖方法二 debouncelet inp = document.querySelector("input");let t = null;inp.oninput = debounce(function(){console.log(this.value);},500)function debounce(fn,delay){return function(){if(t !== null){clearTimeout(t);}t = setTimeout(()=>{fn.call(this);},delay)}}</script></body>
</html>

节流

节流就是控制执行次数

案例一：执行次数过多 

 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{height:800px;}</style></head><body><script>window.onscroll = function(){console.log("123");}</script></body>
</html>

案例二：定时器节流

 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{height:800px;}</style></head><body><script>// 节流方法一 定时器let flag = true;window.onscroll = function(){if(flag){setTimeout(()=>{console.log("111");flag = true;},500)}flag = false;}</script></body>
</html>

案例三：throttle节流

 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{height:800px;}</style></head><body><script>// 节流方法二：throttlelet flag = true;window.onscroll = throttle(function(){console.log("111");},500)function throttle(fn,delay){let flag = true;return function(){if(flag){setTimeout(()=>{fn.call(this)flag = true},delay)}flag = false;}}</script></body>
</html>

三

【手写函数防抖和节流】 https://www.bilibili.com/video/BV1pQ4y1M71e/?p=3&share_source=copy_web&vd_source=c1fe9c75396fdc6f65b56d15f5eb00b3

相关文章：

专题 | 防抖和节流

一 防抖&#xff1a;单位时间内&#xff0c;频繁触发事件&#xff0c;只执行最后一次 场景&#xff1a;搜索框搜索输入&#xff08;利用定时器&#xff0c;每次触发先清掉以前的定时器&#xff0c;从新开始&#xff09; 节流&#xff1a;单位时间内&#xff0c;频繁触发事件&…...

编程日记 2023/2/12 17:47:39

C++入门：重载运算符和重载函数

C 允许在同一作用域中的某个函数和运算符指定多个定义&#xff0c;分别称为函数重载和运算符重载。重载声明是指一个与之前已经在该作用域内声明过的函数或方法具有相同名称的声明&#xff0c;但是它们的参数列表和定义&#xff08;实现&#xff09;不相同。当您调用一个重载函…...

编程日记 2023/2/12 17:46:22

conda 新建虚拟环境 等等

1&#xff1a;conda create -n env_name package_name #创建名为env_name的新环境&#xff0c;并在该环境下安装名为package_name 的包&#xff0c;例如&#xff1a;conda create -n Arg python3.8 # 创建名字为Arg python为3.8版本的虚拟环境2&#xff1a; conda activate env…...

编程日记 2023/2/12 17:45:09

【C++：STL之栈和队列 | 模拟实现 | 优先级队列 】

目录 1. stack的介绍和使用 1.1 stack的介绍 1.2 stack的使用 2 栈的模拟实现 3 queue的介绍和使用 3.1 queue的介绍 3.2 queue的使用 4 queue的模拟实现 5 deque的介绍 5.1deque的原理介绍 5.2 deque的缺陷 5.3 为什么选择deque作为stack和queue的底层默认容器 6 p…...

编程日记 2023/2/12 17:43:49

基于SpringBoot+Vue的疫苗预约管理系统（Java项目）

【辰兮要努力】&#xff1a;hello你好我是辰兮&#xff0c;很高兴你能来阅读&#xff0c;昵称是希望自己能不断精进&#xff0c;向着优秀程序员前行&#xff01; 博客来源于项目以及编程中遇到的问题总结&#xff0c;偶尔会有读书分享&#xff0c;我会陆续更新Java前端、后台、…...

编程日记 2023/2/12 17:42:38

华为OD机试 - 计算网络信号（Python），真题含思路

计算网络信号 题目 网络信号经过传递会逐层衰减，且遇到阻隔物无法直接穿透，在此情况下需要计算某个位置的网络信号值。 注意:网络信号可以绕过阻隔物 array[m][n] 的二维数组代表网格地图，array[i][j] = 0 代表 i 行 j 列是空旷位置;array[i][j] = x ( x 为正整数)代表 i …...

编程日记 2023/2/12 17:41:26

【Spring】注解实现IOC操作，你理解了吗？

作者&#xff1a;狮子也疯狂 专栏&#xff1a;《spring开发》 坚持做好每一步&#xff0c;幸运之神自然会驾凌在你的身上 专栏推荐&#xff1a;写文章刚刚起步&#xff0c;各个专栏的知识点后续会补充完善&#xff0c;不断更新好文&#xff0c;希望大 家支持一下。 专栏名字El…...

编程日记 2023/2/12 17:39:12

微搭低代码从入门到精通01-总体介绍

在过去我们开发小程序&#xff0c;要学习各类知识。比如前端知识、后端知识、服务器知识及各种中间件及数据库的知识。 要想学会这些知识&#xff0c;既需要投入大量的学习时间&#xff0c;而且要经过相当的实践才可以掌握。 如果立志从事开发行业&#xff0c;投入精力去学习…...

编程日记 2023/2/12 17:38:00

类的继承

类的继承&#xff1a;一个类继承另一个类&#xff0c;自动拥有这个类的属性和方法&#xff0c;类似于包含与被包含的关系。被继承的类称为父类--子类则是继承父类的类。一个父类可以有多个子类&#xff1b;一个子类可以有多个父类&#xff08;多继承&#xff09;问题创建子类时…...

编程日记 2023/2/12 17:36:45

应用场景一：西门子PLC通过桥接器连接MQTT服务器

应用场景描述&#xff1a; 云平台、MES等数据采集、设备管理系统&#xff0c;需要通过MQTT的方式&#xff0c;上传和下发数据&#xff0c;MQTT服务器可以获取PLC的实时状态数据&#xff0c;也可以下发控制指令。桥接器提供4G、WIFI和有线三种连接方式。 网络拓扑&#xff1a;…...

编程日记 2023/2/12 17:35:34

计算机组成原理（四）

1.理解存储器的分类方法&#xff1b;理解存储器的层次结构&#xff1b;熟悉存储器的几个技术指标&#xff08;主要是存储容量、存取时间、存取周期、存储器带宽等&#xff09;&#xff1b; 存储器分类方法&#xff1a;   按与CPU的连接和功能分类&#xff1a;     主存储…...

编程日记 2023/2/12 17:34:23

状态机设计举例

⭐本专栏针对FPGA进行入门学习&#xff0c;从数电中常见的逻辑代数讲起&#xff0c;结合Verilog HDL语言学习与仿真&#xff0c;主要对组合逻辑电路与时序逻辑电路进行分析与设计&#xff0c;对状态机FSM进行剖析与建模。 &#x1f525;文章和代码已归档至【Github仓库&#xf…...

编程日记 2023/2/12 17:33:11

Kubernetes1.25中Redis单机和集群部署实例二

1、概述我们知道在 Kubernetes 容器编排平台中, 我们可以非常方便的进行应用的扩容缩, 同时也能非常方便的进行业务的迭代&#xff0c;本章主要讲解在Kubernetes1.25搭建Redis单实例和Redis集群主从同步的环境流程步骤, 如果是高频访问重要的线上业务我们最好是部署在物理机器上…...

编程日记 2023/2/12 17:31:58

【STM32】【HAL库】遥控关灯0 概述

相关连接 【STM32】【HAL库】遥控关灯0 概述 【STM32】【HAL库】遥控关灯1主机 【STM32】【HAL库】遥控关灯2 分机 【STM32】【HAL库】遥控关灯3 遥控器 需求 家里有几个房间,开关距离床都挺远的 睡觉想要关灯的时候需要下床 因此设计了本次项目 需要满足以下要求: 可以控…...

编程日记 2023/2/12 17:30:39

C语言学习笔记(三): 选择结构程序设计

if语句 if(){} if (a1){printf("hehe");} //单独一个ifif(){}else{} int a 1, b 2;if (a b) {printf("haha"); //if else}else{printf("hehe");}if(){}else if(){} int a 1, b 2;if (a b) {printf("haha");}else if (a …...

编程日记 2023/2/12 17:29:25

图----无向图

1.定义 图的定义&#xff1a;图是由一组顶点和一组能够将两个顶点相连的边组成 边&#xff1a;edge 顶点&#xff1a;vertex 连通图&#xff1a;如果从任意一个顶点都存在一条路径到达另外一个任意顶点&#xff0c;我们称这幅图是连通图。 非连通图&#xff1a;由若干连通的…...

编程日记 2023/2/12 17:28:11

【C++1】函数重载，类和对象，引用，/string类，vector容器，类继承和多态，/socket，进程信号

文章目录1.函数重载&#xff1a;writetofile()&#xff0c;Ctrue和false&#xff0c;C0和非02.类和对象&#xff1a;vprintf构造函数&#xff1a;对成员变量初始化析构函数&#xff1a;一个类只有一个&#xff0c;不允许被重载3.引用&#xff1a;C中&取地址&#xff0c;C中…...

编程日记 2023/2/12 17:26:46

JetpackCompose从入门到实战学习笔记8—ConstraintLayout的简单使用

JetpackCompose从入门到实战学习笔记8—ConstraintLayout的简单使用 1.简介&#xff1a; Compose 中的 ConstraintLayout ConstraintLayout 是一种布局&#xff0c;让您可以相对于屏幕上的其他可组合项来放置可组合项。它是一种实用的替代方案&#xff0c;可代替使用多个已嵌…...

编程日记 2023/2/12 17:24:28

Spring Boot 快速入门（绝对经典）

目录 1、理论概述 1.1、什么是Spring Boot? 1.2、Spring Boot的特点 1.3、开发环境 2、实战——创建和配置项目 2.1、Spring Boot项目创建的两种方式 2.1.1、方法一&#xff1a;通过网站构建项目 2.1.2、使用Spring Initializr创建&#xff08;推荐&#xff09; 2.2、…...

编程日记 2023/2/12 17:23:19

golang context上下文

文章目录一、为什么需要context二、context 接口三、Background 方法四、 with 系列函数1、WithCancel 方法2、WithDeadline 方法3、WithTimeout 方法4、WithValue 方法五、使用注意事项一、为什么需要context 在 Go http包的Server中&#xff0c;每一个请求在都有一个对应的 …...

编程日记 2023/2/12 17:22:09

Linux---Linux是什么

Linux 便成立的核心网站&#xff1a; http://www.kernel.org Linux是什么 Linux 就是一套操作系统 Linux 就是核心与系统呼叫接口那两层 软件移植&#xff1a;如果能够参考硬件的功能函数并据以修改你的操作系统程序代码&#xff0c; 那经过改版后的操作系统就能够在另一个硬…...

编程日记 2023/2/12 17:21:01

C语言（Tgmath.h库（C99），exit和atexit）

一.Tgmath.h库&#xff08;C99&#xff09; C99标准提供得tgmath.h头文件定义了泛型类型宏。比如在math.h中为一个函数定义了3中类型(float,double和long double)的版本&#xff0c;那么tgmath.h文件就创建一个泛型类型宏&#xff0c;与原来的float,double和long double版本的…...

编程日记 2023/2/12 17:19:51

LeetCode 刷题系列 -- 739. 每日温度

给定一个整数数组 temperatures &#xff0c;表示每天的温度&#xff0c;返回一个数组 answer &#xff0c;其中 answer[i] 是指对于第 i 天&#xff0c;下一个更高温度出现在几天后。如果气温在这之后都不会升高&#xff0c;请在该位置用 0 来代替。示例 1:输入:temperatures …...

编程日记 2023/2/12 17:18:44

如何生成毕业论文的目录和创建模板

有粉丝同学最近在写毕业论文&#xff0c;其中比较让人恼火的是毕业论文的目录&#xff0c;折腾了几遍没弄好&#xff0c;想让我写个简单地教程&#xff0c;那就来吧。主要分为三步&#xff1a;第一步是从模板里面提取标题的样式&#xff0c;第二步是对自己的论文使用设置好的标…...

编程日记 2023/2/12 17:17:32

新来的23岁软件测试员上来秀了波操作，把几个老员工看傻了

春招了&#xff0c;公司来了个小伙子&#xff0c;一看简历&#xff0c;嘿&#xff1f;22岁&#xff0c;这不刚毕业的小毛孩子嘛&#xff0c;结果没想到人家上来就把现有项目的性能优化了一遍&#xff0c;给公司节省了一半的成本&#xff0c;这种“王炸”打法&#xff0c;直接给…...

编程日记 2023/2/12 17:15:13

Window10开放某个端口

需求&#xff1a;由于防火墙原因&#xff0c;开放某个端口:如9999 在开始那里搜索防火墙-进入防火墙 第一步&#xff1a;核实是否启动了防火墙&#xff0c;之后进行 第二步&#xff1a;点击“高级设置”&#xff0c;→“入站规则”→“新建规则”→“端口”→ “下一步” …...

编程日记 2023/2/12 17:13:59

进阶7 分页查询

进阶7 分页查询&#xff01;&#xff01;&#xff01; 目录概述练习题概述 应用场景&#xff1a;当要显示的数据一页显示不全&#xff0c;需要分页提交SQL请求 语法&#xff1a; select 查询列表 from 表名 【join type join 表2 on 连接条件 where 筛选条件 group by 分组字段…...

编程日记 2023/2/12 17:12:45

利用升序定时器链表处理非活动连接

参考自游双《Linux高性能服务器编程》 背景 服务器同常需要定期处理非活动连接&#xff1a;给客户发一个重连请求&#xff0c;或关闭该连接&#xff0c;或者其他。我们可以通过使用升序定时器链表处理非活动连接&#xff0c;下面的代码利用alarm函数周期性的触发SIGALRM信号&a…...

编程日记 2023/2/12 17:11:36

MySQL 开发规范

一、数据库命名规范所有数据对象名称必须小写 :​​db_user​​禁止使用MySQL 保留关键字&#xff0c;若是则引用 临时表以​​tmp_​​​ 开头&#xff0c;备份表以​​bak_​​ 开头并以时间戳结尾所有存储相同数据的列名和列类型必须一致二、数据库基本设计规范​​1、MySQL…...

编程日记 2023/2/12 17:10:28

【C语言进阶】预处理与程序环境

目录一.详解编译与链接1.前言2.翻译环境3.剖析编译过程4.运行环境二.预处理详解1.预定义符号2.剖析#define(1).定义标识符(2).定义宏(3).替换规则(4).#和##(5).宏与函数的对比(6).#undef3.条件编译4.文件包含(1).头文件包含的方式(2).嵌套文件包含一.详解编译与链接 1.前言 在…...

编程日记 2023/2/12 17:09:19

实验教学中心网站建设/seo推广软件排名

java 贪心算法&#xff08;无重复区间&#xff09; ************************* 贪心算法 算法描述&#xff1a;原问题可拆解为多阶段进行&#xff0c;每个阶段都做出当前阶段的最优选择&#xff08;当前阶段最优不一定是全局最优&#xff09; 适用场景&#xff1a;如果当前阶…...

编程日记 2025/1/27 11:09:53

微信做网站/网上网络推广

课件01 文稿17 课程05 试卷04 问卷03 作业02 直播10 可能会有评估06...

编程日记 2025/1/27 7:57:32

网站分析百度/百度信息流推广和搜索推广

我有一个奇怪的问题,在Softlayer Washington数据中心托管.在Softlayer上从EC2实例测试我的服务器&#xff1a; –[rootEC2-Box ~]# ping -f -c 100 MY-SL-BoxPING MY-SL-Box (MY-SL-Box) 56(84) bytes of data...................................................--- MY-SL-Bo…...

编程日记 2025/1/27 7:47:16

开发公司年度总结报告/培训优化

这几天做了一个网站的CMS系统,当然就要用到TOMCAT来对项目进行部署了.但是客户的服务器上已经安转了我们用.NET制作的OA系统&#xff0c;所以在客户的服务器上已经有完整的IIS7服务&#xff0c;而IIS7默认会占用所有的80端口&#xff08;虽然服务器有两个IP&#xff0c;而它只用…...

编程日记 2025/1/27 6:31:33

wordpress评论表情/长沙网站seo服务

这种“反悔”操作真的很强 模型概述 贪心操作中保证每一步都选取当前最优解&#xff0c;但通过某种转换将一步更改操作转为一个可选取的物品。 一些例题 51nod1380 夹克老爷的逢三抽一 又到了诺德县的百姓孝敬夹克大老爷的日子&#xff0c;带着数量不等的铜板的村民准时聚集到了…...

编程日记 2025/1/27 5:18:13

郑州专业的网站建设公司排名/江门网站优化公司

时隔数月&#xff0c;小废终于有时间温习厨艺了。搜刮一下橱柜&#xff0c;还有一包酸菜鱼底料&#xff0c;为了它去买一条鱼吧。酸菜鱼是毋庸置疑的大菜&#xff0c;因为做出来肯定是一大碗。但从厨艺难度系数上来说&#xff0c;应该是非常低的&#xff0c;底料下锅炒两分钟&a…...

编程日记 2025/1/27 2:00:45