当前位置: 首页 > 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是不能随意更改的)&…...

MySQL篇:事务

1.四大特性 首先&#xff0c;事务的四大特性&#xff1a;ACID&#xff08;原子性&#xff0c;一致性&#xff0c;隔离性&#xff0c;持久性&#xff09; 在InnoDB引擎中&#xff0c;是怎么来保证这四个特性的呢&#xff1f; 持久性是通过 redo log &#xff08;重做日志&…...

处理在 electron 中使用开启了懒加载的 el-image 后,窗口最大化或窗口尺寸变化后图片无法显示的问题

文章目录 1、问题描述2、详情动图3、解决思路4、解决方案5、效果展示 1、问题描述 在 electron 中使用 el-image 时&#xff0c;开启了懒加载后&#xff0c;发现只有当窗口滚动后&#xff0c;图片才会显示&#xff0c;即便图片已经处于窗口的可视区域。当拖动窗口使其尺寸变大…...

Electron 进程间通信

文章目录 渲染进程到主进程&#xff08;单向&#xff09;渲染进程到主进程&#xff08;双向&#xff09;主进程到渲染进程 &#xff08;单向&#xff0c;可模拟双向&#xff09; 渲染进程到主进程&#xff08;单向&#xff09; send &#xff08;render 发送&#xff09;on &a…...

0基础学python-8:if,while,for

目录 前言&#xff1a; 一、选择循环结构 1.if条件语句 2.while 3.for循环 4.break语句 5.continue语句 前言&#xff1a; if、while 和 for 是 Python 中常用的控制流结构&#xff0c;它们分别用于条件判断、循环执行和迭代遍历。这些关键字帮助程序根据条件和数据进行选…...

低空经济持续发热,无人机培训考证就业市场及前景剖析

随着科技的不断进步和社会需求的日益增长&#xff0c;低空经济已成为全球及我国经济增长的新引擎。作为低空经济的重要组成部分&#xff0c;无人机技术因其广泛的应用领域和显著的经济效益&#xff0c;受到了社会各界的广泛关注。为满足市场对无人机人才的需求&#xff0c;无人…...

[IDEA插件] JarEditor 编辑jar包(直接新增、修改、删除jar包内的class文件)

文章目录 1. 安装插件 JarEditor2. 在IDEA中添加外部JAR包3. JarEditor 使用介绍 之前我们需要修改jar内文件的时候需要解压jar包&#xff0c;反编译class&#xff0c;新建java源文件&#xff0c;修改代码&#xff0c;再编译成class&#xff0c;替换jar包内的class文件。 现在…...

JavaScript系列:JS实现复制粘贴文字以及图片

文章目录 一. 基于 Clipboard API 复制文字&#xff08;推荐&#xff09;基本概念主要方法使用限制实际应用示例 二、基于 document.execCommand(copy)缺陷实际应用示例说明 三、复制图片功能四、封装 一. 基于 Clipboard API 复制文字&#xff08;推荐&#xff09; 基本概念 …...

音视频入门基础:H.264专题(14)——计算视频帧率的公式

一、引言 通过FFmpeg命令可以获取到H.264裸流文件的视频帧率&#xff1a; 在vlc中也可以获取到视频帧率&#xff08;vlc底层也使用了FFmpeg进行解码&#xff09;&#xff1a; 所以FFmpeg和vlc是怎样获取到H.264编码的视频的帧率呢&#xff1f;它们其实是通过SPS中的VUI parame…...

LeetCode-返回链表倒数第K个节点、链表的回文结构,相交链表

一、返回链表倒数第k个节点 . - 力扣&#xff08;LeetCode&#xff09; 本体思路参展寻找中间节点的方法&#xff0c;寻找中间节点是定义快慢指针&#xff0c;快指针每次走两步&#xff0c;慢指针每次走一步&#xff0c;当快指针为空或者快指针的下一个节点是空时&#xff0c;…...

Linux 网络配置与连接

一、网络配置 1.1 ifconfig 网卡配置查询 ifconfig #查看所有启动的网络接口信息 ifconfig 指定的网卡 #查看指定网络接口信息 1.2 修改网络配置文件 vim /etc/sysconfig/network-scripts/ifcfg-ens33 #ens33网络配置文…...