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

3个实现前端节流的方法,附代码。

一、什么是前端节流

前端节流(Throttling)是一种优化前端性能的技术,它可以限制某些函数的执行频率,以提高性能和用户体验。节流可以用于控制一些高频事件的触发频率,比如滚动事件、鼠标移动事件、窗口大小改变事件等。

在前端中,有些事件会频繁触发,如果每次事件触发都执行一些复杂的操作,会导致页面变得卡顿,影响用户体验。而通过节流技术,可以控制事件的触发频率,从而减少不必要的操作,提高页面性能和用户体验。

二、前端节流方法

在前端中,可以通过以下几种方式实现节流:

  1. 使用setTimeout:

在函数执行时设置一个定时器,在定时器结束前不再执行函数。如果在定时器结束前再次触发函数,可以清除之前的定时器并重新设置一个新的定时器。

function throttle(func, delay) {let timer = null;return function() {if (!timer) {timer = setTimeout(() => {func.apply(this, arguments);timer = null;}, delay);}}
}
  1. 使用时间戳:

记录上次函数执行的时间戳,在函数执行时判断当前时间与上次执行时间的间隔是否大于指定的时间间隔,如果大于则执行函数并更新时间戳。

function throttle(func, delay) {let lastTime = 0;return function() {const now = Date.now();if (now - lastTime >= delay) {func.apply(this, arguments);lastTime = now;}}
}
  1. 使用requestAnimationFrame:

在函数执行时使用requestAnimationFrame来控制函数的执行频率。

function throttle(func) {let ticking = false;return function() {if (!ticking) {requestAnimationFrame(() => {func.apply(this, arguments);ticking = false;});ticking = true;}}
}

以上是几种常见的前端节流实现方式,可以根据具体的需求选择适合的方式来实现节流。

相关文章:

3个实现前端节流的方法,附代码。

一、什么是前端节流 前端节流(Throttling)是一种优化前端性能的技术,它可以限制某些函数的执行频率,以提高性能和用户体验。节流可以用于控制一些高频事件的触发频率,比如滚动事件、鼠标移动事件、窗口大小改变事件等…...

uniapp 微信小程序根据后端返回的文件链接打开并保存到手机文件夹中【支持doc、docx、txt、xlsx等类型的文件】

项目场景: 我们在使用uniapp官方提供的uni.downloadFile以及uni.saveFile时,会发现这个文件下载的默认保存位置和我们预想的不太一样,容易找不到,而且没有提示,那么我们就需要把文件打开自己保存并且有提示保存到哪个…...

一群追星星的人,对AI的盼与怕

面对AI,有人害怕,有人期盼。 “AI和画画的、开网约车的、写东西的人有仇吗?”近来成了很多从业者的心声。大模型技术驱动了AI的能力进化过临界点,我们普通人根本就跟不上,或快或慢被淘汰。看起来,AI正在给人…...

同步IO、异步IO以及五种网络IO模式

目录 一、同步IO和异步IO 二、五种网络IO模式 1、阻塞IO 2、非阻塞IO 3、IO多路复用 3.1、SELECT 3.2、POLL 3.3、EPOLL 一、同步IO和异步IO 场景1: 小明去打开水,而开水塔此时没有水,小明在现场一直等待开水到来,或者不断…...

IP-Guard日志数据上传至 SYSLOG 服务器操作指南

一、功能简介 服务器支持把日志数据上传到 SYSLOG 服务器。 二、功能配置 2.1 数据目录移交设置 在服务器安装目录下 OServer3.ini 文件中,添加工具启动配置,配置五分钟内生效。 Path:设置移交目录路径,IPG 服务器会把收集完成的…...

线程安全(二)synchronized 的底层实现原理、锁升级、对象的内存结构

目录 一、基础使用1.1 不加锁的代码实现1.2 加锁的代码实现二、实现原理2.1 synchronized 简介2.2 对象监控器(Monitor)2.3 加锁过程第一步:判断 Owner 指向第二步:进入 EntryList 阻塞第三步:主动进入 WaitSet 等待三、锁升级3.1 对象的内存结构3.2 Mark Word 对象头3.3 …...

【学习笔记】无人机(UAV)在3GPP系统中的增强支持(十四)-无人机操控关键绩效指标(KPI)框架

引言 本文是3GPP TR 22.829 V17.1.0技术报告,专注于无人机(UAV)在3GPP系统中的增强支持。文章提出了多个无人机应用场景,分析了相应的能力要求,并建议了新的服务级别要求和关键性能指标(KPIs)。…...

数电基础 - 半导体存储

目录 一. 简介 一. 只读存储器 二. 可编程只读存储器 三. 可擦除的可编程只读存储器 四. 随机存储器 五. 存储器容量的扩展 六. 总结 一. 简介 半导体存储是数字电路中用于存储数据的重要组成部分。 半导体存储器主要分为两大类:随机存取存储器&#xff0…...

校园工会体育报名小程序的设计

管理员账户功能包括:系统首页,个人中心,赛事公告管理,球员管理,球队信息管理,比赛信息,比赛报名管理 微信端账号功能包括:系统首页,比赛信息,比赛报名&#…...

2024Datawhale AI夏令营---基于术语词典干预的机器翻译挑战赛--学习笔记

#Datawhale #NLP 1.背景介绍: 机器翻译(Machine Translation,简称MT)是自然语言处理领域的一个重要分支,其目标是将一种语言的文本自动转换为另一种语言的文本。机器翻译的发展可以追溯到20世纪50年代,经历…...

手机下载APP (uniapp/vue)

一、uniapp <template><view class"content"><view class"appName">{{ formData.appName }}</view><view class"appInfo">{{ formData.appInfo }}</view><image class"logo" :src"formDa…...

python数据可视化(5)——绘制饼图

课程学习来源&#xff1a;b站up&#xff1a;【蚂蚁学python】 【课程链接&#xff1a;【【数据可视化】Python数据图表可视化入门到实战】】 【课程资料链接&#xff1a;【链接】】 Python绘制饼图分析北京天气 饼图&#xff0c;是一个划分为几个扇形的圆形统计图表&#xff…...

实习随笔【iviews的Select实现‘与全部互斥’的多选】

在实习中&#xff0c;遇到了如下需求&#xff0c;要求如下&#xff1a; 上面提到了一个需求为&#xff0c;选择全部与选择一个或者多个互斥&#xff0c;我们来看一下如何解决 核心代码 监听value的变化&#xff0c;如果含有‘全部’&#xff0c;且数组长度>1&#xff0c;则删…...

网站架构核心要素

高性能 技术指标&#xff1a;响应时间、吞吐量、并发数 前端优化手段 页面布局&#xff1a;css在前&#xff0c;js在后通信数据量&#xff1a;数据尽量精简缓存&#xff1a;浏览器缓存、cdn异步&#xff1a;ajax 后端优化手段 缓存&#xff1a;反向代理、redis异步&#x…...

XML 解析异常问题解决

问题描述 The parser has encountered more than "64000" entity expansions in this document; this is the limit imposed by the JDK. 在运行 Java 应用程序时&#xff0c;出现了 XML 解析异常。具体表现为&#xff1a; 报错信息显示无法创建 StAX&#xff08;S…...

C# 匿名方法、Lambda、Linq概念及联系

匿名方法、Lambda表达式与LINQ 匿名方法 概念&#xff1a; 匿名方法是没有名称的方法实现&#xff0c;通常与委托关联使用。它提供了一种在不创建独立命名方法的情况下编写代码块的方式。 语法&#xff1a; delegate void MyDelegate(string message);MyDelegate del dele…...

django ninja get not allowed 能用 put delete

遇到一个奇怪的问题&#xff0c;django-ninja 编写的 get post 方法不能使用 # 获取Material router.get(/material, responseList[MaterialSchemaOut]) paginate(MyPagination) def list_material(request, filters: Filters Query(...)):qs retrieve(request, Material, f…...

服务器操作集合

服务器使用PC作为代理访问外网 1、PC上启动代理&#xff0c;比如nginx 下载nginx&#xff1a;http://nginx.org/en/download.html 修改配置文件&#xff0c;在conf下&#xff1a; http {include mime.types;default_type application/octet-stream;sendfile o…...

论文阅读【时空+大模型】ST-LLM(MDM2024)

论文阅读【时空大模型】ST-LLM&#xff08;MDM2024&#xff09; 论文链接&#xff1a;Spatial-Temporal Large Language Model for Traffic Prediction 代码仓库&#xff1a;https://github.com/ChenxiLiu-HNU/ST-LLM 发表于MDM2024&#xff08;Mobile Data Management&#xf…...

【linux基础】linux远程传输三种免交互方式

linux远程传输三种免交互方式 文章目录 linux远程传输三种免交互方式1、使用sshpass工具2、使用expect脚本来输入密码3、SSH 密钥对 1、使用sshpass工具 建立信任关系的做法是最方便和安全的做法&#xff0c;但是在有些场景下(比如远端的authorized_keys是不能随意更改的)&…...

LimboAI:Godot 4原生行为树+黑板+状态机AI框架实战指南

1. 这不是又一个“AI插件”&#xff0c;而是Godot 4里真正能跑通行为树黑板状态机闭环的AI开发框架我第一次在Godot 4.2项目里把LimboAI的BTTaskMoveTo节点拖进行为树编辑器、连上BlackboardKey、再绑定到一个带NavigationAgent3D的NPC身上&#xff0c;按下F5运行——那个角色真…...

Proxifier+Charles实现Windows桌面程序HTTPS抓包

1. 为什么单靠Charles抓不到某些exe的HTTPS流量&#xff1f;你有没有遇到过这种情况&#xff1a;装好Charles、配好系统代理、证书也信任了&#xff0c;浏览器和大部分App的HTTPS请求都能清清楚楚看到明文&#xff0c;可偏偏某个本地运行的.exe程序——比如某款桌面版网盘客户端…...

MakeMeAHanzi完整指南:如何免费获取9000+汉字笔画动画数据

MakeMeAHanzi完整指南&#xff1a;如何免费获取9000汉字笔画动画数据 【免费下载链接】makemeahanzi Free, open-source Chinese character data 项目地址: https://gitcode.com/gh_mirrors/ma/makemeahanzi MakeMeAHanzi是一个免费开源的汉字数据项目&#xff0c;为开发…...

Shader Graph边缘光原理与实战:从菲涅尔效应到世界空间法线

1. 为什么边缘光不是“加个描边”那么简单——从美术需求到Shader本质的错位“给模型加个边缘光”&#xff0c;听起来像Unity编辑器里拖个组件、点几下鼠标就能搞定的事。我第一次接到这个需求时&#xff0c;美术同学在评审会上甩出一张《原神》角色截图&#xff0c;指着雷电将…...

网络设备a

顺序1.聚合 2.vlan 3.MSTP 4.VRRP 5.路由先配置聚合lsw2 lsw1内同配置vlan 10 20&#xff0c;配置好后对所有接口放通vlan放通的其一进行MSTP配置lsw1作为instance 1的根桥 instance 2的备份根桥lsw2作为instance 2的根桥 instance 1的备份根桥再配置VRRP之后进行osp…...

GPT-4万亿参数仅激活2%?揭秘MoE稀疏激活的工程真相

1. 项目概述&#xff1a;参数规模与稀疏激活的真相拆解“GPT-4 Has 1.8 Trillion Parameters. It Uses 2% of Them Per Token.”——这句话过去两年在技术社区反复刷屏&#xff0c;常被当作“大模型已突破算力瓶颈”的佐证&#xff0c;也常被误读为“GPT-4只用360亿参数&#x…...

成都制造企业电费越来越高,AI能耗异常预警该先接哪些数据?

一、电费上涨&#xff0c;先别只看总表对成都不少制造企业来说&#xff0c;电费已经不只是后勤费用&#xff0c;而是影响订单毛利、交付节奏和产线管理的一项经营变量。问题在于&#xff0c;许多企业发现电费升高时&#xff0c;第一反应仍然停留在“今年产量多了”“设备老了”…...

Perplexity反义词≠低困惑度?——斯坦福NLP实验室内部培训材料首次公开的4层认知陷阱

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;Perplexity反义词≠低困惑度&#xff1f;——认知错位的根源剖析 Perplexity&#xff08;困惑度&#xff09;是语言模型评估中被广泛误读的核心指标。许多人直觉认为“低困惑度即好模型”&#xff0c;甚至将“…...

Claude中文完整上手指南:官网、API、Claude Code与国内使用一篇讲透

Claude中文完整上手指南&#xff1a;官网、API、Claude Code与国内使用一篇讲透 写在前面 现在再看 Claude&#xff0c;已经不能只把它当成一个聊天工具了。 对普通用户来说&#xff0c;它是一个很强的长文理解、写作整理和复杂问答助手&#xff1b;对开发者来说&#xff0c;…...

AI Agent 运行时革命:从上下文牢笼到可审计的会话日志

1. 这不是新赛道&#xff0c;是 runtime 层的“操作系统时刻”来了 你有没有试过让一个 AI 代理连续工作四十分钟&#xff1f;不是闲聊&#xff0c;而是真正在查资料、调 API、写代码、改文档——一环扣一环地推进一个复杂任务。我去年就带着团队跑过这样一个销售线索深度分析 …...