JS手写代码篇---手写节流函数

8、节流函数

什么是节流函数?

指规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。

与防抖函数有什么区别?

防抖函数是延迟函数执行,直到事件停止触发一段时间后再执行,适用于需要等待事件停止触发后再执行的场景。而节流函数则是控制函数在指定时间内只执行一次,适用于需要控制执行频率的场景。

   function throttle(fn, wait) {let preTime = new Date();return function () {let context = this;let args = arguments;let curTime = new Date();let during = curTime - preTime;if (during > wait) {// 当时间大于等待时间的时候// 执行函数fn.apply(context, args);// 更新 preTimepreTime = curTime;}};}

() => {
fn.apply(context , args);//保证函数的上下文和参数与原始调用时一致
} , wait)
}
}


## 8、节流函数**什么是节流函数?**指规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。**与防抖函数有什么区别?**防抖函数是延迟函数执行,直到事件停止触发一段时间后再执行,适用于需要等待事件停止触发后再执行的场景。而节流函数则是控制函数在指定时间内只执行一次,适用于需要控制执行频率的场景。

function throttle(fn, wait) {
let preTime = new Date();
return function () {
let context = this;
let args = arguments;
let curTime = new Date();
let during = curTime - preTime;
if (during > wait) {
// 当时间大于等待时间的时候
// 执行函数
fn.apply(context, args);
// 更新 preTime
preTime = curTime;
}
};
}


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

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

相关文章

2025年05月30日Github流行趋势

项目名称:agenticSeek 项目地址url:https://github.com/Fosowl/agenticSeek项目语言:Python历史star数:13040今日star数:1864项目维护者:Fosowl, steveh8758, klimentij, ganeshnikhil, apps/copilot-pull-…

node_modules包下载不下来

如果项目里面的package-lock.json有resolved ,就指向了包的下载来源,如果这个网址挂了,那npm i 就会一直卡着。而且,在终端去修改 npm的镜像是没有用的 解决办法是:把项目里面的 lock文件 .npmrc都删了 然后重新下载就可以了

OramaCore 是您 AI 项目、答案引擎、副驾驶和搜索所需的 AI 运行时。它包括一个成熟的全文搜索引擎、矢量数据库、LLM界面和更多实用程序

一、软件介绍 文末提供程序和源码下载 OramaCore 是您的项目、答案引擎、副驾驶和搜索所需的 AI 运行时。 它包括一个成熟的全文搜索引擎、矢量数据库、LLM具有行动计划和推理功能的接口、用于根据数据编写和运行您自己的自定义代理的 JavaScript 运行时,以及更多…

小白成长之路-计算机网络(四)

文章目录 前言一、网络连接查看1.netstat2.ss3.bond绑定3.1准备好这三个文件3.2添加bond配置文件3.3关闭网络图形化服务3.4重启 4.Linux下的抓包工具Wireshark 5、web压力测试工具6、路由追踪命令 二、[练习题](https://blog.csdn.net/m0_70730767/article/details/148262716?…

CppCon 2014 学习:Lock-Free Programming

你这段文字讲的是“为什么要使用无锁(Lock-Free)代码”,我帮你总结并解释一下: 为什么选择无锁代码? 并发性和可扩展性(Concurrency and scalability) 无锁算法允许多个线程同时操作共享数据&a…

Proteus寻找元器件(常见)

汇总: 1 主控芯片 STM32系列(32位) AT89C51(51系列) 2显示模块 OLED 3 按键 Button 4 电阻电容 Res(电阻) Cap(电容) 5 驱动模块 L298N(电机驱动芯片&am…

vue+threeJs 绘制3D圆形

嗨,我是小路。今天主要和大家分享的主题是“vuethreeJs 绘制圆形”。 今天找到一个用three.js绘制图形的项目,主要是用来绘制各种形状。 项目案例示意图 1.THREE.ShapeGeometry 定义:是 Three.js 中用于从 2D 路径形状&#xff08…

macOS烧录stm32程序初步成功

完整总结:STM32H7 项目编译与烧录流程(macOS OpenOCD/GDB) 1️⃣ 编译工程 在项目目录下执行 make,生成 ELF 文件(如 Blink.elf): cd /Users/code/Stm32code/Blink/build make clean # 可选…

正则表达式的修饰符

修饰符 修饰符不写在正则表达式里,标记位于表达式之外 /正则表达式/修饰符gglobal - 全局匹配 查找所有的匹配项。 i i (ignore case) - 忽略大小写 示例:/abc/i 可以匹配 "abc", "Abc", "ABC" 等

JS浮点数精度问题

在JavaScript开发中,浮点数精度问题是一个常见的陷阱。本文将深入探讨JavaScript中浮点数精度问题的原因、影响以及解决方案。 一、浮点数精度常见问题 (一)加法运算 console.log(0.1 0.2); // 0.30000000000000004 console.log(0.7 0.1…

本地Markdown开源知识库选型指南

本地Markdown开源知识库选型指南 以下是几款优秀的本地Markdown开源知识库解决方案,适合不同需求场景: 1. Obsidian (非完全开源但免费) 特点:基于Markdown的本地优先知识管理,丰富的插件生态优势:双向链接、图形视…

苏州SAP代理公司排名:工业园区企业推荐的服务商

目录 一、SAP实施商选择标准体系 1、行业经验维度 2、实施方法论维度 3、资质认证维度 4、团队实力维度 二、SAP苏州实施商工博科技 1、SAP双重认证,高等院校支持 2、以SAP ERP为核心,助力企业数字化转型 三、苏州使用SAP的企业 苏州是中国工业…

springboot项目下面的单元测试注入的RedisConnectionFactory类redisConnectionFactory值为什么为空呢?

你遇到的问题是: RedisConnectionFactory redisConnectionFactory 在单元测试中为 null 这是 Spring Boot 单元测试中非常常见的问题,根本原因是你的测试类没有启用 Spring 容器上下文,导致 Resource 注解无法注入 Bean。 ✅ 正确做法&…

光电学、计算机科学及算法国际会议(OCSA 2025)征稿启事​

在科技浪潮奔涌向前的当下,光电学、计算机科学及算法领域的创新成果不断涌现,持续重塑着各个行业的格局,深刻影响着我们的生活。为了进一步促进该领域的学术交流与合作,汇聚全球智慧,光电学、计算机科学及算法国际会议…

小样本分类新突破:QPT技术详解

问题导向式提示调优(QPT) 这篇论文主要讲了一个针对小样本(数据量少)文本分类问题的新方法,叫问题导向式提示调优(QPT)。 核心思路是让预训练语言模型(比如BERT的升级版RoBERTa)在少量标注数据下,通过设计特定的“提问式模板”和“标签词扩展技术”来提升分类效果。…

Oracle EBS 12.1 处理ISG 发布的wsdl 被请求时遇到500错误

Oracle 12.1.3 通过ISG 发布了一个服务,该服务在被频繁调用的时候,出现500 错误,临时解决方案是可以通过重启oafm组件解决,但是需要定位原因。 排查日志路径 $INST_TOP/logs/ora/10.1.3/opmn/default_group~oafm~default_group~1…

shadcn/ui

文章目录 前言✅ 核心特点📦 支持组件(常用)🚀 安装使用(框架支持)初始化(Next.js 项目为例)添加一个组件 🧠 对比其他组件库📘 官方资源✅ 总结✅ 功能特性&…

力扣每日一题——找到离给定两个节点最近的节点

目录 题目链接:2359. 找到离给定两个节点最近的节点 - 力扣(LeetCode) 题目描述 解法一:双指针路径交汇法​ 基本思路 关键步骤 为什么这样可行呢我请问了? 举个例子 特殊情况 Java写法: C写法&a…

Termux可用中间人网络测试工具Xerosploit

Termux可用中间人网络测试工具Xerosploit。 Xerosploit 是一款基于 MITM 的本地网络渗透测试工具包。 食用方法: git clone https://github.com/LionSec/xerosploit cd xerosploit sudo python3 install.py 运行: sudo xerosploit 使用备注&#xff1…

vue3 导出excel

需求&#xff1a;导出自带格式的excel表格 1.自定义二维数组格式 导出 全部代码&#xff1a; <el-button click"exportExcel">导出</el-button> const exportExcel () > {const data [[商品, 单价, 数量, 总价],[A, 100, 1.55, { t: n, f: B2*C2…