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

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

news 2025/7/16 18:28:22

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

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2025/7/16 3:22:51

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/6/21 17:17:46

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2025/7/13 18:55:28

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2025/7/13 19:56:24

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2025/7/16 0:34:29

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

编程新知 2025/6/11 3:20:47

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

编程新知 2025/7/16 9:56:18

【前端异常】JavaScript错误处理：分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

编程新知 2025/7/6 8:20:01

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下&#xff1a; avformat_open_input 精简后的代码如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

编程新知 2025/7/16 2:04:55

Vue3中的computer和watch

computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...

编程新知 2025/7/6 5:23:51