前端节流、防抖函数

节流

什么是节流?
节流就是同一个事件 一秒钟他执行了很多次。但是我不想他执行这么多次,我只想让他执行一次 或者两次。
那该怎么办? why baby why
那我想就是他执行的时候 我就设置一个定时器,如果定时器是空的,等会就去给你执行。如果你前面执行了马上又去执行,那不好意思你上次的都还没去执行,那这次我肯定不会去执行。定时器有值,那我就等上次执行了再去执行。

let timer = null;
const handleMouseMove = function (func, timeMs = 100) {if (timer) {// return //节流clearTimeout(timer); //防抖}timer = setTimeout(() => {func();timer = null;}, timeMs);
};

防抖

什么是防抖?
防抖就是同一个事件 一秒钟他执行了很多次。但是我只想让他没一直点击(执行)的时候才去 执行,就是你皮等你皮,等你累了,听话了我再去帮你办事
那该怎么办? why baby why
那我想就是他执行的时候,我就看你累了没 听话了不,如果听话 那我执行,不听话 你一直点 我就一直不去执行。

let timer = null;
const handleMouseMove = function (func, timeMs = 100) {if (timer) {return //节流//clearTimeout(timer); //防抖}timer = setTimeout(() => {func();timer = null;}, timeMs);
};

发现节流和防抖代码居然只有一行不同,这是为啥

  1. 节流 如果time里面的定时器函数未执行 已经在队列的时候 等待他执行了后再去执行
  2. 防抖 如果timer里面的定时器函数未执行 timer有值直接清除定时器 不让定时器函数执行上次未执行的代码块 然后再次调用定时器,等待执行

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/77303.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode第171题_Excel表列序号

LeetCode 第171题:Excel表列序号 题目描述 给你一个字符串 columnTitle,表示 Excel 表格中的列名称。返回 该列名称对应的列序号。 例如: A -> 1 B -> 2 C -> 3 ... Z -> 26 AA -> 27 AB -> 28 ...难度 简单 题目链…

基于YOLO与PySide6的道路缺陷检测系统(源码)

道路基础设施的健康状况直接影响交通安全与城市运营效率。传统人工巡检方式存在效率低、覆盖范围有限等问题,而基于深度学习的自动化检测技术为道路缺陷识别提供了创新解决方案。本文介绍一个结合YOLO目标检测模型与PySide6图形界面的道路塌陷检测系统,实现了高效、可视化的缺…

04_jQuery

文章目录 一、jQuery介绍1.1、jQuery概述1.2、jQuery特点1.3 为什么要用jQuery 二、引入jQuery2.1、直接引入2.2、CDN引入 三、jQuery语法3.1、基本使用3.2、jQuery事件及常用事件方法3.3、jQuery选择器(重点)3.3.1、基本选择器3.3.2、层次选择器3.3.3、…

Adruino:传感器及步进电机

一、传感器* 1、温湿度传感器 DHT11它采用专用的数字采集技术和温湿度传感器技术,包括一个电阻式感湿元件和NTC测温元件,并与一个高性能的8位单片机连接。DATA端采用串行接口(单线双向)与微控制器进行同步和通信。 DHT11的供电电…

高中数学联赛模拟试题精选第18套几何题

在 △ A B C \triangle ABC △ABC 中, A B < A C AB< AC AB<AC, 点 K K K, L L L, M M M 分别是边 B C BC BC, C A C A CA, A B AB AB 的中点. △ A B C \triangle ABC △ABC 的内切圆圆心为 I I I, 且与边 B C BC BC 相切于点 D D D. 直线 l l l 经过线段…

ubantu18.04(Hadoop3.1.3)之Spark安装和编程实践

说明&#xff1a;本文图片较多&#xff0c;耐心等待加载。&#xff08;建议用电脑&#xff09; 注意所有打开的文件都要记得保存。 第一步&#xff1a;准备工作 本文是在之前Hadoop搭建完集群环境后继续进行的&#xff0c;因此需要读者完成我之前教程的所有操作。 以下所有操…

DCDC芯片,boost升压电路设计,MT3608 芯片深度解析:从架构到设计的全维度技术手册

一、硬件架构解析:电流模式升压 converter 的核心设计 (一)电路拓扑与核心组件 MT3608 采用恒定频率峰值电流模式升压(Boost)转换器架构,核心由以下模块构成: 集成功率 MOSFET 内置 80mΩ 导通电阻的 N 沟道 MOSFET,漏极(Drain)对应引脚 SW,源极(Source)内部接…

Java 日志:掌握本地与网络日志技术

日志记录是软件开发中不可或缺的一部分&#xff0c;它为开发者提供了洞察应用程序行为、诊断问题和监控性能的手段。在 Java 生态系统中&#xff0c;日志框架如 Java Util Logging (JUL)、Log4j 和 Simple Logging Facade for Java (SLF4J) 提供了丰富的功能。然而&#xff0c;…

上位机知识篇---时钟分频

文章目录 前言 前言 本文简单介绍了一下时钟分频。时钟分频&#xff08;Clock Division&#xff09;是数字电路设计中常见的技术&#xff0c;用于将高频时钟信号转换为较低频率的时钟信号&#xff0c;以满足不同模块的时序需求。它在处理器、FPGA、SoC&#xff08;片上系统&am…

推荐几个免费提取音视频文案的工具(SRT格式、通义千问、飞书妙记、VideoCaptioner、AsrTools)

文章目录 1. 前言2. SRT格式2.1 SRT 格式的特点2.2 SRT 文件的组成2.3 SRT 文件示例 3. 通义千问3.1 官网3.2 上传音视频文件3.3 导出文案 4. 飞书妙记4.1 官网4.2 上传音视频文件4.3 导出文案4.4 缺点 5. VideoCaptioner5.1 GitHub地址5.2 下载5.2.1 通过GitHub下载5.2.2 通过…

Linux深度探索:进程管理与系统架构

1.冯诺依曼体系结构 我们常见的计算机&#xff0c;如笔记本。我们不常见的计算机&#xff0c;如服务器&#xff0c;大部分都遵守冯诺依曼体系。 截至目前&#xff0c;我们所认识的计算机&#xff0c;都是由⼀个个的硬件组件组成。 输入设备&#xff1a;键盘&#xff0c;鼠标…

观察者模式 (Observer Pattern)

观察者模式(Observer Pattern)是一种行为型设计模式。它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。当主题对象的状态发生变化时,会自动通知所有观察者对象,使它们能够自动更新自己的状态。 一、基础 1. 意图 核心目的:定义对象间的一种一对…

Network.framework 的引入,不是为了取代 URLSession

Network.framework 的引入&#xff0c;不是为了取代 URLSession 如果你感觉 Network.framework 的引入, 可能是为了取代 URLSession, 那你就大错特错了&#xff01;这里需要非常准确地区分一下&#xff1a; &#x1f535; Network.framework 不是为了取代 URLSession。 &…

Redis 数据分片三大方案深度解析与 Java 实战

Redis 数据分片是将数据分散存储在多个 Redis 实例上的技术&#xff0c;以解决单个 Redis 实例在存储容量、性能和可用性上的限制。常见的 Redis 数据分片方案包括客户端分片、代理分片和Redis Cluster&#xff08;集群分片&#xff09;&#xff0c;以下为你详细介绍&#xff1…

FreeBSD可以不经过windows服务器访问windows机器上的共享文件吗?

答案是&#xff1a;当然可以&#xff01; 使用sharity-light 软件 可以使用sharity-light 软件&#xff0c;直接不用安装samba等软件&#xff0c;直接访问windows机器上的共享文件。 但是可惜的是&#xff0c;sharity-light在FreeBSD的ports里弃用了。看来是从FreeBSD 8 就开…

主流 LLM 部署框架

主流 LLM 部署框架 框架主要特点适用场景vLLM- 超快推理&#xff08;高吞吐&#xff09; - 动态批处理 - 支持 HuggingFace Transformer - 支持 PagedAttention高并发、低延迟在线推理TGI (Text Generation Inference)- Huggingface官方出品 - 多模型管理 - 支持动态量化 - 支持…

在 Vue 3 setup() 函数中使用 TypeScript 处理 null 和 undefined 的最佳实践

在 Vue 3 中使用 setup() 函数和 TypeScript 时&#xff0c;null 和 undefined 是两个需要特别关注的类型。虽然它们看起来都表示“没有值”&#xff0c;但它们在 JavaScript 和 TypeScript 中有着不同的含义和使用场景。如果不小心处理它们&#xff0c;可能会导致潜在的 bug 或…

在 UniApp 中获取当前页面地址

在 UniApp 中获取当前页面地址&#xff0c;可以通过以下步骤实现&#xff1a; 方法说明&#xff1a; 获取当前页面实例&#xff1a;使用 getCurrentPages() 获取页面栈数组&#xff0c;最后一个元素即为当前页面实例。 提取页面路径和参数&#xff1a;从页面实例的 route 属性…

【华为】防火墙双击热备-之-主备模式-单外网线路-分享

FW1和FW2的业务接口都工作在三层&#xff0c;上行连接二层交换机。上行交换机连接运营商的接入点&#xff0c;运营商为企业分配的IP地址为100.100.100.2。现在希望FW1和FW2以主备备份方式工作。正常情况下&#xff0c;流量通过FW1转发&#xff1b;当FW1出现故障时&#xff0c;流…

crossOriginLoading使用说明

1. 说明 此配置用于控制 Webpack 动态加载的代码块&#xff08;chunk&#xff09;&#xff08;例如代码分割或懒加载的模块&#xff09;在跨域&#xff08;不同域名&#xff09;加载时的行为。它通过为动态生成的 <script>标签添加 crossorigin 属性&#xff0c;确保符合…