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

一篇文章让你彻底学会--节流（并且自己可以手写）

news 文章来源：https://blog.csdn.net/Yan9_9/article/details/130314674 2025/5/14 18:16:33

Hi,有的小伙伴们在面试的时候会被要求手写节流函数，很多都被难着了吧，宝贝，那你你没有理解节流函数。

今天，就让我带你攻克它！

1.节流

单位时间内，事件触发，最多只执行一次事件回调。

人话:说白了节流就是技能CD，只有CD结束后才能继续释放技能。

2.节流案例

节流案例: 鼠标在盒子上移动，不管移动多少次，都是200ms后才进行+1操作。

3.使用

3.1 手写节流

核心思路：利用setTimeout来进行实现。

1.声明一个定时器变量。

2.当鼠标每次滑动都先判断是否有定时器了，如果有则不开启新的定时器。

3.如果没有定时器则开启定时器，记得存到变量里面

--定时器里面执行事件回调

--定时器里面要把定时器清空

 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {width: 500px;height: 500px;background-color: #ccc;color: #fff;text-align: center;font-size: 100px;}</style>
</head>
//引入lodash库<script src='./lodash.js'></script><body><div class="box"></div><script>const box = document.querySelector('.box')let i = 1  // 让这个变量++// 鼠标移动函数function moveFn() {box.innerHTML = ++i// 如果里面存在大量操作 dom 的情况，可能会卡顿}//手写的节流函数function throttle(fn,time){let timer=null;return function(){//先判断有没有定时器if(!timer){timer=setTimeout(function(){fn();//执行事件的回调函数timer=null;//清空定时器(此处为什么用null清空，见下方解释。PS:定时器内部清空定时器)},time)}}}//使用lodash的节流函数box.addEventListener('mousemove', throttle(moveFn, 200));//在200ms内，最多只执行一次+1事件回调。</script>
</body></html>

注意:

定时器内部清空定时器的方法

//定时器内部清空定时器
//1.我们之前经常使用clearTimeout来进行定时器的清空，但是有个前提，我们都是在定时器外部来进行清空的，如果在定时器内部进行清空，是不会起作用的。
let timer=setTimeout(()=>{clearTimeout('timer');//这里清除不起作用，程序还是会输出111console.log("111");
},200)//2.所以我们在定时器内部清空掉定时器会使用timer=null的方式。

3.2 使用lodash库

1.安装lodash.js

cnpm i lodash --save


2.引入lodash

import _ from 'lodash'


3.使用(vue3中)

<div @mousemove='moveFn'></div>let moveFn=_.debounce(()=>{console.log("事件触发200ms后会打印");
},200)


4.节流的使用场景

1.高频触发事件:mouseMove。

2.页面尺寸缩放resize。

3.页面滚动条滚动:scroll。

抓紧时间练起来吧，兄dei，再不练你就废啦！

记得支持我哦，么么哒，祝您好事成双~~~~~~

相关文章：

一篇文章让你彻底学会--节流（并且自己可以手写）

Hi,有的小伙伴们在面试的时候会被要求手写节流函数&#xff0c;很多都被难着了吧&#xff0c;宝贝&#xff0c;那你你没有理解节流函数。 今天&#xff0c;就让我带你攻克它&#xff01; 1.节流 单位时间内&#xff0c;事件触发&#xff0c;最多只执行一次事件回调。 人话:说…...

编程日记 2023/4/23 19:28:58

C++ 形参是类的指针 class * 通过new的方式创建对象

当你在C中使用类指针&#xff08;class *&#xff09;作为函数的形参&#xff0c;并通过 new 关键字创建对象时&#xff0c;这种用法确实会改变类对象的值。原因是你通过指针传递了对象的内存地址&#xff0c;而不是传递对象本身。这意味着在函数内部对对象的任何修改都会直接影…...

编程日记 2023/4/23 19:23:56

手把手教你将项目部署到服务器！

一、导入centos7虚拟机&#xff1a; 打开VMWare&#xff0c;点击“打开虚拟机”&#xff0c;选择centos7.ova之后&#xff0c;选择存储路径&#xff1a; 点击导入&#xff1a; 选择“不再显示此消息”&#xff0c;点击“重试”按钮&#xff1a; 点击“编辑虚拟机设置”&#x…...

编程日记 2023/4/23 19:18:55

OpenHarmony应用开发-ArkUI方舟开发框架简析

方舟开发框架&#xff08;简称ArkUI&#xff09;为OpenHarmony应用的UI开发提供了完整的基础设施&#xff0c;包括简洁的UI语法、丰富的UI功能&#xff08;组件、布局、动画以及交互事件&#xff09;&#xff0c;以及实时界面预览工具等&#xff0c;可以支持开发者进行可视化界…...

编程日记 2023/4/23 19:13:53

【Transformer系列（4）】Transformer模型结构超详细解读

前言 前一篇我们一起读了Transformer的论文《Attention Is All You Need》&#xff0c;不知道大家是否真的理解这个传说中的神&#xff08;反正俺是没有~&#xff09; 这两天我又看了一些视频讲解&#xff0c;感谢各位大佬的解读&#xff0c;让我通透了不少。 这篇文章就和…...

编程日记 2023/4/23 19:08:52

Idea启动运行报错：Error:java: 无效的源发行版: 13

最近在做Springboot项目时&#xff0c;常常出现上述错误&#xff0c;小编也不知道怎么回事&#xff0c;到网上找了这个方面的解决办法&#xff0c;但是却发现根本解决不了&#xff0c;最终通过小编多次尝试&#xff0c;终于发现&#xff0c;为什么会报这个错误。(应该是Java版本…...

编程日记 2023/4/23 19:03:51

【元分析研究方法】学习笔记1.形成问题

步骤1 形成问题 该步骤的作用该步骤中需要注意的问题该步骤中部分知识点我的收获 参考来源&#xff1a;库珀 (Cooper, H. M. )., 李超平, & 张昱城. (2020). 元分析研究方法: A step-by step approach. 中国人民大学出版社. 这章内容很简单&#xff1a;①变量的刻画&#x…...

编程日记 2023/4/23 18:58:50

2023年3月 青少年软件编程（Python） 等级考试试卷（五级）

一、单选题(共25题&#xff0c;共50分) 1.已知一个列表lst [2,3,4,5,6]&#xff0c;lst.append(20)&#xff0c;print(lst)的结果是&#xff1f;&#xff08;C&#xff09;&#xff08;2分&#xff09; A.[10,2,3,4,5,6,20] B.[20,2,10,3,4,5,6] C.[2,3,4,5,6,20] D.[2,3,4,5,…...

编程日记 2023/4/23 18:53:49

必须要知道的hive调优知识（上）

Hive数据倾斜以及解决方案 1、什么是数据倾斜 数据倾斜主要表现在&#xff0c;map/reduce程序执行时&#xff0c;reduce节点大部分执行完毕&#xff0c;但是有一个或者几个reduce节点运行很慢&#xff0c;导致整个程序的处理时间很长&#xff0c;这是因为某一个key的条数比其…...

编程日记 2023/4/23 18:48:47

什么是Cache Aside Pattern与延迟双删

Cache Aside Pattern是一种常用的缓存设计模式&#xff0c;用于在应用程序中使用缓存提高系统性能的同时&#xff0c;避免缓存与数据库数据不一致的情况出现。延迟双删是Cache Aside Pattern的一种优化&#xff0c;可以进一步提高系统性能。 以下是关于Cache Aside Pattern和延…...

编程日记 2023/5/29 20:21:59

frp 流量特征

frp 流量特征 非常明显的明文流量特征...

编程日记 2023/4/23 18:38:45

Unity --- UGUI（Unity Graphical user interface）--- Canvas画布

1.UI --- User Interface --- 使用者与机器之间的交互界面 1.所谓的自适应系统指的是分辨率的适应&#xff1a; 比如在一个分辨率下做的UI放到另一个分辨率下显示时&#xff0c;如果没有自适应系统的话就会导致UI过大&#xff0c;过小&#xff0c;被辟成一半等等情况&#xff…...

编程日记 2023/4/23 18:33:44

c++积累6-内联函数

1、说明 内联函数是c为提高程序运行速度所做的一项改进。 2、常规函数运行 编译的可执行程序&#xff1a;由一组机器语言指令组成。 程序执行&#xff1a; 1、操作系统将这些指令载入到内存&#xff0c;每条指令都有一个特定的内存地址 2、计算机逐步执行这些指令 3、如果有…...

编程日记 2023/4/23 18:28:42

ESP32学习笔记13-MCPWM主要用于无刷电机驱动

16.MCPWM 16.1概述 ESP32 有两个 MCPWM 单元，可用于控制不同类型的电机。每个单元都有三对PWM输出 每个 A/B 对可由三个定时器定时器 0、1 和 2 中的任何一个计时。 同一定时器可用于为多对PWM输出提供时钟。 每个单元还能够收集输入，例如，检测电机过电流或过电压，以及获得…...

编程日记 2023/4/23 18:23:41

MyBatis-plu 和 JPA 对比

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 MyBatis-plu 和 JPA 前言一、说下相同点二、差异点一、从实现来说&#xff1a;CURD实现方式不一样二、分页上三、雪花id四、伪删除五、子类排除父类的字段 总结 前言 提示&…...

编程日记 2023/4/23 18:18:40

一文详解Python中多进程和进程池的使用方法

这篇文章将介绍Python中多进程和进程池的使用方法&#xff0c;并提供一些实用的案例供大家参考&#xff0c;文中的示例代码讲解详细&#xff0c;感兴趣的小伙伴可以了解一下 目录 Python是一种高级编程语言&#xff0c;它在众多编程语言中&#xff0c;拥有极高的人气和使用率。…...

编程日记 2023/4/23 18:13:39

前端部署发布项目后，如何通知用户刷新页面、清除缓存

以下只是一些思路&#xff0c;有更好的实现方式可以留言一起交流学习 方式一&#xff1a;纯前端 在每次发布前端时&#xff0c;使用webpack构建命令生成一个json文件&#xff0c;json中写个随机生成的一个字符串&#xff08;比如时间戳&#xff09;&#xff0c;每次打包程序都…...

编程日记 2023/4/23 18:08:38

项目上线｜慕尚集团携手盖雅工场，用数字化推动人效持续提升

过去十年&#xff0c;中国零售业以前所未有的速度被颠覆、被重塑&#xff0c;数字化则是其中重要的推动要素。 随着数字化转型的深入&#xff0c;零售企业的数字化不再局限于布局线上渠道&#xff0c;且更关乎其背后企业核心运营能力的全链路数字化改造。而贯穿于运营全链路的…...

编程日记 2023/5/30 3:21:18

Java重载 与封装、继承

方法重载 在同一个类中&#xff0c;出现了方法名相同&#xff0c;参数不同的方法时 &#xff0c;我们叫方法重载 作用&#xff1a;根据不同参数&#xff0c;选择不同方法 实例 public static void main(String[] args){public int add(int a,int b){return ab;}public double…...

编程日记 2023/4/23 17:58:36

sed正则表达式替换字符方法

在 Linux 命令行中&#xff0c;可以使用 sed 命令来替换指定文件中的指定字符。具体方法如下&#xff1a; sed -i s/<old_string>/<new_string>/g <filename>其中&#xff0c;<old_string> 表示要被替换的字符串&#xff0c;<new_string> 表示替…...

编程日记 2023/4/23 17:53:34

不讲废话普通人了解 ChatGPT——基础篇第一课

wx供重浩&#xff1a;创享日记 获取更多内容 文章目录 前言什么是 ChatGPT它是如何工作的ChatGPT 和其它机器人有什么不同 前言 不知道大家在第一次会使用 ChatGPT 并尝试和他对话时有没有感到震惊。当ChatGPT首次推出时&#xff0c;我立即被它的功能所吸引。 曾经在遇到繁杂…...

编程日记 2023/4/23 17:48:33

MATLAB计算气象干旱指标：SAPEI

MATLAB计算干旱指标：SAPEI 标准化前降水蒸散发指数（Standardized Antecedent Precipitation Evapotranspiration Index, SAPEI）1 指数简介1.1 指数计算原理步骤1：计算潜在蒸散发（potential evapotranspiration, PET）步骤2：计算降水和PET的日差1.2 数据资料1.3 拟合分布的…...

编程日记 2023/4/23 17:43:32

GPT对SaaS领域有什么影响？

GPT火了&#xff0c;Chat GPT真的火了。 突然之间&#xff0c;所有人都在讨论AI&#xff0c;最初的访客是程序员、工程师、AI从业者&#xff0c;从早高峰写字楼电梯里讨论声&#xff0c;到村里大爷们的饭后谈资&#xff0c;路过的狗子都要和它讨论两句GPT的程度。 革命的前夜…...

编程日记 2023/4/23 17:38:31

backward()和zero_grad()在PyTorch中代表什么意思

文章目录 问&#xff1a;backward()和zero_grad()是什么意思&#xff1f;backward()zero_grad() 问&#xff1a;求导和梯度什么关系问&#xff1a;backward不是求导吗&#xff0c;和梯度有什么关系&#xff08;哈哈哈哈&#xff09;问&#xff1a;你可以举一个简单的例子吗问&a…...

编程日记 2023/4/23 17:33:29

C++多线程编程(一) thread类初窥

多线程编程使我们的程序能够同时执行多项任务。 在C11以前&#xff0c;C没有标准的多线程库&#xff0c;只能使用C语言中的pthread&#xff0c;在C11之后&#xff0c;C标准库中增加了thread类用于多线程编程。thread类其实是对pthread的封装&#xff0c;不过更加好用&#xff…...

编程日记 2023/4/23 17:28:28

Qt QVector 详解：从底层原理到高级用法

目录标题 引言&#xff1a;QVector的重要性与简介QVector的常用接口QVector和std::Vector迭代器&#xff1a;遍历QVector 中的元素&#xff08;Iterators: Traversing Elements in QVector&#xff09;常规索引遍历基于范围的for循环&#xff08;C11及以上&#xff09;使用STL样…...

编程日记 2023/5/31 1:04:13

快速弄懂RPC

快速弄懂RPC 常见的远程通信方式远程调用RPC协议RPC的运用场景和优势 常见的远程通信方式 基于REST架构的HTTP协议以及基于RPC协议的RPC框架。 远程调用 是指跨进程的功能调用。 跨进程可以理解为一个计算机节点的多个进程或者多个计算机节点的多个进程。 RPC协议 远程过…...

编程日记 2023/4/23 17:18:25

ONVIF协议介绍

目录标题 一、 ONVIF协议简介&#xff08;Introduction to ONVIF Protocol&#xff09;1.1 ONVIF的发展历程&#xff08;The Evolution of ONVIF&#xff09;1.2 ONVIF的主要作用与优势&#xff08;The Main Functions and Advantages of ONVIF&#xff09; 二、 ONVIF协议的底…...

编程日记 2023/4/23 17:13:23

AI大模型内卷加剧，商汤凭什么卷进来

2023年&#xff0c;国内大模型何其多。 目前&#xff0c;已宣布推出或即将推出大模型的国内企业多达20余家&#xff0c;基本上能想到的相关企业都已入局。其中&#xff0c;既有资金雄厚的BAT、华为、字节等大厂&#xff0c;也有王慧文、王小川、周伯文等互联网大佬领衔的初创企…...

编程日记 2023/4/23 17:08:22

企业网络安全漏洞分析及其解决_kaic

摘要 为了防范网络安全事故的发生,互联网的每个计算机用户、特别是企业网络用户&#xff0c;必须采取足够的安全防护措施&#xff0c;甚至可以说在利益均衡的情况下不惜一切代价。事实上&#xff0c;许多互联网用户、网管及企业老总都知道网络安全的要性&#xff0c;却不知道网…...

编程日记 2023/4/23 17:03:20