当前位置: 首页 > 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;}}
}

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

http://www.lryc.cn/news/400672.html

相关文章:

  • uniapp 微信小程序根据后端返回的文件链接打开并保存到手机文件夹中【支持doc、docx、txt、xlsx等类型的文件】
  • 一群追星星的人,对AI的盼与怕
  • 同步IO、异步IO以及五种网络IO模式
  • IP-Guard日志数据上传至 SYSLOG 服务器操作指南
  • 线程安全(二)synchronized 的底层实现原理、锁升级、对象的内存结构
  • 【学习笔记】无人机(UAV)在3GPP系统中的增强支持(十四)-无人机操控关键绩效指标(KPI)框架
  • 数电基础 - 半导体存储
  • 校园工会体育报名小程序的设计
  • 2024Datawhale AI夏令营---基于术语词典干预的机器翻译挑战赛--学习笔记
  • 手机下载APP (uniapp/vue)
  • python数据可视化(5)——绘制饼图
  • 实习随笔【iviews的Select实现‘与全部互斥’的多选】
  • 网站架构核心要素
  • XML 解析异常问题解决
  • C# 匿名方法、Lambda、Linq概念及联系
  • django ninja get not allowed 能用 put delete
  • 服务器操作集合
  • 论文阅读【时空+大模型】ST-LLM(MDM2024)
  • 【linux基础】linux远程传输三种免交互方式
  • MySQL篇:事务
  • 处理在 electron 中使用开启了懒加载的 el-image 后,窗口最大化或窗口尺寸变化后图片无法显示的问题
  • Electron 进程间通信
  • 0基础学python-8:if,while,for
  • 低空经济持续发热,无人机培训考证就业市场及前景剖析
  • [IDEA插件] JarEditor 编辑jar包(直接新增、修改、删除jar包内的class文件)
  • JavaScript系列:JS实现复制粘贴文字以及图片
  • 音视频入门基础:H.264专题(14)——计算视频帧率的公式
  • LeetCode-返回链表倒数第K个节点、链表的回文结构,相交链表
  • Linux 网络配置与连接
  • 5. 基于Embedding实现超越elasticsearch高级搜索