专题 | 防抖和节流
一
防抖：单位时间内，频繁触发事件，只执行最后一次
场景：搜索框搜索输入（利用定时器，每次触发先清掉以前的定时器，从新开始）
节流：单位时间内，频繁触发事件，只执行一次
场景：高频事件 快速点击，鼠标滑动、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
相关文章：
专题 | 防抖和节流
一 防抖：单位时间内，频繁触发事件，只执行最后一次 场景：搜索框搜索输入（利用定时器，每次触发先清掉以前的定时器，从新开始） 节流：单位时间内，频繁触发事件&…...
C++入门：重载运算符和重载函数
C 允许在同一作用域中的某个函数和运算符指定多个定义，分别称为函数重载和运算符重载。重载声明是指一个与之前已经在该作用域内声明过的函数或方法具有相同名称的声明，但是它们的参数列表和定义（实现）不相同。当您调用一个重载函…...
conda 新建虚拟环境 等等
1：conda create -n env_name package_name #创建名为env_name的新环境，并在该环境下安装名为package_name 的包，例如：conda create -n Arg python3.8 # 创建名字为Arg python为3.8版本的虚拟环境2： conda activate env…...
【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…...
基于SpringBoot+Vue的疫苗预约管理系统（Java项目）
【辰兮要努力】：hello你好我是辰兮，很高兴你能来阅读，昵称是希望自己能不断精进，向着优秀程序员前行！ 博客来源于项目以及编程中遇到的问题总结，偶尔会有读书分享，我会陆续更新Java前端、后台、…...
华为OD机试 - 计算网络信号（Python），真题含思路
计算网络信号 题目 网络信号经过传递会逐层衰减，且遇到阻隔物无法直接穿透，在此情况下需要计算某个位置的网络信号值。 注意:网络信号可以绕过阻隔物 array[m][n] 的二维数组代表网格地图，array[i][j] = 0 代表 i 行 j 列是空旷位置;array[i][j] = x ( x 为正整数)代表 i …...
【Spring】注解实现IOC操作，你理解了吗？
作者：狮子也疯狂 专栏：《spring开发》 坚持做好每一步，幸运之神自然会驾凌在你的身上 专栏推荐：写文章刚刚起步，各个专栏的知识点后续会补充完善，不断更新好文，希望大 家支持一下。 专栏名字El…...
微搭低代码从入门到精通01-总体介绍
在过去我们开发小程序，要学习各类知识。比如前端知识、后端知识、服务器知识及各种中间件及数据库的知识。 要想学会这些知识，既需要投入大量的学习时间，而且要经过相当的实践才可以掌握。 如果立志从事开发行业，投入精力去学习…...
类的继承
类的继承：一个类继承另一个类，自动拥有这个类的属性和方法，类似于包含与被包含的关系。被继承的类称为父类--子类则是继承父类的类。一个父类可以有多个子类；一个子类可以有多个父类（多继承）问题创建子类时…...
应用场景一：西门子PLC通过桥接器连接MQTT服务器
应用场景描述： 云平台、MES等数据采集、设备管理系统，需要通过MQTT的方式，上传和下发数据，MQTT服务器可以获取PLC的实时状态数据，也可以下发控制指令。桥接器提供4G、WIFI和有线三种连接方式。 网络拓扑：…...
计算机组成原理（四）
1.理解存储器的分类方法；理解存储器的层次结构；熟悉存储器的几个技术指标（主要是存储容量、存取时间、存取周期、存储器带宽等）； 存储器分类方法： 按与CPU的连接和功能分类： 主存储…...
状态机设计举例
⭐本专栏针对FPGA进行入门学习，从数电中常见的逻辑代数讲起，结合Verilog HDL语言学习与仿真，主要对组合逻辑电路与时序逻辑电路进行分析与设计，对状态机FSM进行剖析与建模。 🔥文章和代码已归档至【Github仓库…...
Kubernetes1.25中Redis单机和集群部署实例二
1、概述我们知道在 Kubernetes 容器编排平台中, 我们可以非常方便的进行应用的扩容缩, 同时也能非常方便的进行业务的迭代，本章主要讲解在Kubernetes1.25搭建Redis单实例和Redis集群主从同步的环境流程步骤, 如果是高频访问重要的线上业务我们最好是部署在物理机器上…...
【STM32】【HAL库】遥控关灯0 概述
相关连接 【STM32】【HAL库】遥控关灯0 概述 【STM32】【HAL库】遥控关灯1主机 【STM32】【HAL库】遥控关灯2 分机 【STM32】【HAL库】遥控关灯3 遥控器 需求 家里有几个房间,开关距离床都挺远的 睡觉想要关灯的时候需要下床 因此设计了本次项目 需要满足以下要求: 可以控…...
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 …...
图----无向图
1.定义 图的定义：图是由一组顶点和一组能够将两个顶点相连的边组成 边：edge 顶点：vertex 连通图：如果从任意一个顶点都存在一条路径到达另外一个任意顶点，我们称这幅图是连通图。 非连通图：由若干连通的…...
【C++1】函数重载，类和对象，引用，/string类，vector容器，类继承和多态，/socket，进程信号
文章目录1.函数重载：writetofile()，Ctrue和false，C0和非02.类和对象：vprintf构造函数：对成员变量初始化析构函数：一个类只有一个，不允许被重载3.引用：C中&取地址，C中…...
JetpackCompose从入门到实战学习笔记8—ConstraintLayout的简单使用
JetpackCompose从入门到实战学习笔记8—ConstraintLayout的简单使用 1.简介： Compose 中的 ConstraintLayout ConstraintLayout 是一种布局，让您可以相对于屏幕上的其他可组合项来放置可组合项。它是一种实用的替代方案，可代替使用多个已嵌…...
Spring Boot 快速入门（绝对经典）
目录 1、理论概述 1.1、什么是Spring Boot? 1.2、Spring Boot的特点 1.3、开发环境 2、实战——创建和配置项目 2.1、Spring Boot项目创建的两种方式 2.1.1、方法一：通过网站构建项目 2.1.2、使用Spring Initializr创建（推荐） 2.2、…...
golang context上下文
文章目录一、为什么需要context二、context 接口三、Background 方法四、 with 系列函数1、WithCancel 方法2、WithDeadline 方法3、WithTimeout 方法4、WithValue 方法五、使用注意事项一、为什么需要context 在 Go http包的Server中，每一个请求在都有一个对应的 …...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式，可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候，写过一篇简单实现，后期随着对该模型的深入研究，本次记录涉及到prophet 的公式以及参数调优，从公式可以更直观…...
ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放
简介 前面两期文章我们介绍了I2S的读取和写入，一个是通过INMP441麦克风模块采集音频，一个是通过PCM5102A模块播放音频，那如果我们将两者结合起来，将麦克风采集到的音频通过PCM5102A播放，是不是就可以做一个扩音器了呢…...
ETLCloud可能遇到的问题有哪些？常见坑位解析
数据集成平台ETLCloud，主要用于支持数据的抽取（Extract）、转换（Transform）和加载（Load）过程。提供了一个简洁直观的界面，以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
Java 二维码
Java 二维码 **技术：**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...
SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）
上一章用到了V2 的概念，其实 Fiori当中还有 V4，咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)，代理中间件（ui5-middleware-simpleproxy）-CSDN博客…...
Yolov8 目标检测蒸馏学习记录
yolov8系列模型蒸馏基本流程，代码下载：这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中，**知识蒸馏（Knowledge Distillation）**被广泛应用，作为提升模型…...
保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama（有网络的电脑）2.2.3 安装Ollama（无网络的电脑）2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...