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

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

news 2025/9/18 18:11:23

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

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

编程新知 2025/8/25 23:31:20

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/8/4 15:02:27

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2025/9/18 2:38:31

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

编程新知 2025/8/21 21:33:01

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2025/8/10 2:34:22

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2025/9/17 7:09:29

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2025/9/12 19:00:19

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

编程新知 2025/9/3 11:05:24

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

编程新知 2025/8/31 0:00:18

数据结构第5章：树和二叉树完全指南（自整理详细图文笔记）

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 原创笔记&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 上一篇&#xff1a;《数据结构第4章 数组和广义表》…...

编程新知 2025/9/18 8:56:35