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

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

news 2026/5/16 23:45:15

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

Word分栏排版进阶：如何实现左右栏独立编辑与中英文对照排版（解决内容错乱问题）

Word分栏排版进阶&#xff1a;左右栏独立编辑与中英文对照排版实战指南 在专业文档制作中&#xff0c;双语对照排版是教师、翻译人员和外语学习者经常遇到的挑战。传统分栏功能虽然简单易用&#xff0c;但当我们需要左边显示英文原文、右边显示对应中文翻译时&#xff0c;直接分…...

编程新知 2026/5/16 23:03:36

FPGA开发入门：从零开始用Vivado实现LED流水灯项目

1. 项目概述与核心价值最近在后台和社群里&#xff0c;看到不少刚接触FPGA开发的朋友&#xff0c;特别是从单片机或嵌入式软件转过来的&#xff0c;对于如何上手第一个完整的FPGA项目感到有些迷茫。大家常问&#xff1a;“我学了Verilog语法&#xff0c;也跑过仿真了&#xff0…...

编程新知 2026/5/16 22:15:50

用HSPICE玩转CMOS反相器：手把手教你分析尺寸、延迟与功耗的权衡

用HSPICE玩转CMOS反相器&#xff1a;手把手教你分析尺寸、延迟与功耗的权衡 在集成电路设计的浩瀚宇宙中&#xff0c;CMOS反相器就像是一颗不起眼却至关重要的基础星体。作为数字电路中最简单的构建模块&#xff0c;它的性能表现直接影响着整个系统的运行效率。对于已经掌握HS…...

编程新知 2026/5/16 21:53:32

用两个三极管+稳压管，手把手教你搭一个简易5V LDO（附原理图、PCB与实测避坑）

用两个三极管稳压管搭建简易5V LDO&#xff1a;从原理图到实测的完整避坑指南 在电子设计领域&#xff0c;线性稳压器(LDO)是电源管理的基础模块。虽然市面上有大量成熟的LDO芯片&#xff0c;但用分立元件搭建一个简易LDO仍然是理解电源原理的绝佳实践。本文将带你用最常见的SS…...

编程新知 2026/5/16 21:06:59

如何选择Mac Mouse Fix安装方式：终极指南让您的Mac鼠标体验完美升级

如何选择Mac Mouse Fix安装方式&#xff1a;终极指南让您的Mac鼠标体验完美升级 【免费下载链接】mac-mouse-fix Mac Mouse Fix - Make Your $10 Mouse Better Than an Apple Trackpad! 项目地址: https://gitcode.com/GitHub_Trending/ma/mac-mouse-fix Mac Mouse Fix是…...

编程新知 2026/5/16 19:47:58

实战指南：深度掌握5大梯度下降优化器的可视化秘籍

实战指南&#xff1a;深度掌握5大梯度下降优化器的可视化秘籍 【免费下载链接】gradient_descent_viz interactive visualization of 5 popular gradient descent methods with step-by-step illustration and hyperparameter tuning UI 项目地址: https://gitcode.com/gh_mi…...

编程新知 2026/5/16 18:21:07

AI商品计划：中国鞋服零售如何用机器学习解决库存与周转难题

过去十年&#xff0c;中国鞋服零售经历了从线下到线上、从粗放铺货到精准运营的剧烈转变。但一个老问题始终没变&#xff1a;该备多少货&#xff0c;备在哪&#xff0c;备什么颜色尺码。备多了&#xff0c;资金压在仓库&#xff0c;季末折扣吞噬利润&#xff1b;备少了&#xf…...

编程新知 2026/5/16 18:13:59

用MakeCode Arcade与树莓派Zero打造复古像素游戏：从拖拽编程到实体街机

1. 项目概述&#xff1a;为什么选择MakeCode Arcade开启你的游戏开发之旅&#xff1f;如果你对编程充满好奇&#xff0c;又或者一直想亲手制作一款属于自己的复古像素风游戏&#xff0c;但被一行行复杂的代码劝退&#xff0c;那么MakeCode Arcade就是你一直在寻找的答案。它不是…...

编程新知 2026/5/16 17:29:35

免费Minecraft基岩版启动器终极指南：突破官方限制的完整解决方案

免费Minecraft基岩版启动器终极指南&#xff1a;突破官方限制的完整解决方案 【免费下载链接】BedrockLauncher 项目地址: https://gitcode.com/gh_mirrors/be/BedrockLauncher 还在为Minecraft基岩版官方启动器的功能限制而困扰吗&#xff1f;想要像Java版那样自由管理…...

编程新知 2026/5/16 16:50:53

从芯片选型到PCB布线：手把手拆解基于Zynq-7100的10Gbps雷达数据采集卡硬件设计

从芯片选型到PCB布线&#xff1a;Zynq-7100雷达数据采集卡硬件设计实战 在高速数据采集领域&#xff0c;10Gbps量级的实时信号处理对硬件设计提出了严苛挑战。当我们面对雷达回波、医学影像或工业检测等场景时&#xff0c;传统采集方案往往在吞吐量、延迟和同步精度上捉襟见肘。…...

编程新知 2026/5/16 15:24:12