【JavaScript】防抖(Debounce)与节流(Throttle)技术

防抖(debounce)和节流(throttle)确实属于性能优化的知识范畴,但它们在日常的JavaScript编程中也非常常见。这是因为,如果不正确处理高频事件(如resize、scroll、keydown等),很容易导致浏览器性能下降,甚至卡死。

防抖(Debounce)

防抖的基本思想是这样的:如果一个函数持续被触发,那么只有在最后一次触发后的一定时间内没有再次触发,这个函数才会被执行。如果在这个时间内又触发了这个函数,那么需要重新计算执行时间。

下面是一个简单的防抖函数的实现:

 
javascript
function debounce(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}

节流(Throttle)

节流的基本思想是这样的:如果一个函数持续被触发,那么每隔一段时间,这个函数就只能执行一次。不论在这个时间间隔内触发了多少次这个函数,它都只执行一次。

下面是一个简单的节流函数的实现:

 
javascript
function throttle(func, limit) {
let inThrottle;
return function() {
const args = arguments;
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}

使用场景

防抖和节流在处理高频事件时非常有用。例如:

  • 当用户持续滚动页面时,你可能希望只在用户停止滚动一段时间后才执行某些操作(如加载更多内容),这时可以使用防抖。
  • 当用户频繁触发某个操作时(如点击按钮),你可能希望限制这个操作的执行频率,以避免对服务器造成过大的压力,这时可以使用节流。

注意事项

虽然防抖和节流可以优化性能,但也需要谨慎使用。过度使用或不当使用可能会导致功能上的问题或不符合用户预期的行为。因此,在使用它们时,需要充分理解其工作原理和适用场景。

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

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

相关文章

0. 云原生之基于乌班图远程开发

云原生专栏大纲 文章目录 安装乌班图配置静态IP重置root密码开启root远程登录开启远程SSH访问安装docker安装docker-compose安装Edge浏览器安装搜狗输入法安装TeamViewer安装虚拟显示器安装JDK安装maven安装vscodevscode插件安装VSCode配置maven、git、jdk、自动报错vscode快捷…

vue脚手架 笔记05

目录 01 路由懒加载(重要) 02 axios在脚手架中的使用 03.axios的二次封装 04 组件缓存 01 路由懒加载(重要) 一次性导入会出现严重的问题 : 首屏卡顿 因为main.js中引入了router/index.js router/index.js又使用了import语句 静态的引入了每一个组件 导致了首屏卡顿 所以我…

30v-180V降3.3V100mA恒压WT5107

30v-180V降3.3V100mA恒压WT5107 WT5107是一款恒压单片机供电芯片,它可以30V-180V直流电转换成稳定的3.3V直流电(最大输出电流300mA),为各种单片机供电。WT5107的应用也非常广泛。它可以用于智能家居、LED照明、电子玩具等领域。比…

学习MVC设计模型

MVC设计模式 概念 - 代码的分层 字母表示层理解MModle模型层业务的具体实现VView视图层展示数据CController控制器层控制业务流程 细化理解层数 View:视图层,用于存放前端页面 Controller:控制器层,用于存放Servlet Modle-Biz&…

jupyter使用的一个奇怪bug——SyntaxError: invalid non-printable character U+00A0

bug来由:从其他部分例如kaggle里复制来的代码直接粘贴在jupyter notebook里,每一行代码都会出现: Cell In[5], line 1 warnings.filterwarnings(ignore) ^ SyntaxError: invalid non-printable character U00A0 单元格 In[5],第 …

每日一练 - PIM-DM与RPF检查机制

01 真题题目 PIM-DM 不依赖于特定的单播路由协议,而是使用现存的单播路由表进行 RPF 检查. A.正确 B.错误 02 真题答案 A 03 答案解析 此陈述是正确的。 PIM-DM(Protocol Independent Multicast - Dense Mode)正如其名,是独立于协议的组播…

多网页登录Cookie免登通俗理解

背景,现在有A、B两个系统,其中B是乾坤框架的微前端,里面又有若干可以单独运行的系统C、D、E、F,现在的目标是,如果没有登录过其中任一系统,则需要跳转登录页登录,登录后,所有的A-F都…

Python 自动化测试入门有哪些内容?

自动化测试是软件测试领域中的一个重要技术,它利用脚本和工具来执行测试任务,减少了人工操作的工作量和时间消耗。Python 是一种功能强大且易于学习的编程语言,被广泛应用于自动化测试领域。本文将从0到1讲解如何使用 Python 进行自动化测试&…

网络编程(一)基本概念

文章目录 一、概念(一)网络发展阶段1. ARPAnet阶段2. TCP/IP两个协议阶段3. 网络体系结构和OSI开放系统互联模型4. TCP/IP协议簇体系结构(1) 应用层:(2)传输层:(3&#x…

白名单在数据防篡改方面的优势与局限

白名单作为一种安全机制,其主要目的是通过预先设定受信任的程序、文件或用户列表,来限制系统资源的访问和执行权限。这种机制在防止未授权的程序或文件运行方面具有一定的效果,从而在一定程度上减少病毒入侵的机会。然而,当我们探…

读书笔记-《人人都是产品经理》

在开发工程师与产品经理的段子中,常看到“人人都是产品经理”这句话,用来调侃这个岗位似乎没有什么门槛。 很明显,这句话的出处,即本书作者想表达的是每个人都可以运用产品思维去解决问题。 01 产品 产品:用来解决某…

python中scrapy

安装环境 pip install scrapy 发现Twisted版本不匹配 卸载pip uninstall Twisted 安装 pip install Twisted22.10.0 新建scrapy项目 scrapy startproject 项目名 注意:项目名称不允许使用数字开头,也不能包含中文 eg: scrapy startproject scrapy_baidu_…

接口响应时间测试

curl 要使用 curl 测试一个接口的响应时间具体步骤和命令示例: 打开你的终端或命令行工具。 使用 curl 命令并添加 -w(或者 --write-out)参数来输出时间统计信息。 示例命令: curl -o /dev/null -s -w "Time to Connect: %{time_connect}\nTime to Start Transfer: …

热重启(硬重启)获取Bitlocker密钥取证

计算机内存(条)在系统运行时存储了大量敏感信息,当断电后,内存中的数据荡然无存。反之,当一直通电的情况下,内存中的一些敏感数据一直存在。当然,正如某些人了解的,当断电后&#xf…

管道光电液位传感器应用在哪些设备

管道光电液位传感器在现代智能设备中扮演着至关重要的角色,特别是在需要检测水管缺水的应用场景中。与传统的浮球开关相比,这种传感器具有高可靠性、稳定性和不易卡死等优点。其先进的光学感应原理无需机械运动,确保了长久的寿命和稳定的性能…

UE4 游戏最快查找ulocalplayer方法

办法1: 1- 打开 CE 2- 搜索字符串“LocalPlayer”而不是“ULocalPlayer”,只需搜索“LocalPlayernullchar” - 在 CheatEngine Memory Viewer 中将会显示类似“LocalPlayer”的内容。 3- 获取此名称的索引(来自 gnames [从搜索字符串中获取的…

Openharmony应用权限声明及权限列表

应用权限管控概述 简介 系统提供了一种允许应用访问系统资源(如:通讯录等)和系统能力(如:访问摄像头、麦克风等)的通用权限访问方式,来保护系统数据(包括用户个人数据)…

《CGT行业监管及上市路径解析》——锦天城高级合伙人虞正春先生在线分享

细胞和基因治疗(Cell and Gene Therapy, CGT)已成为近年来全球药物研发的热点与前沿领域,也得到了国家政策的大力支持。《“十四五”生物经济发展规划》中提到“发展基因诊疗、干细胞治疗、免疫细胞等新技术”,“围绕加快创新药上…

Spring中事务的隔离级别和传播机制

上一篇博客中讲解了关于事务的两种使用方式包括Transactional的详解。 Transactional 注解当中的三个常⻅属性: 1. rollbackFor: 异常回滚属性. 指定能够触发事务回滚的异常类型. 可以指定多个异常类型 2. Isolation: 事务的隔离级别. 默认值为 Isolation.DEFAULT 3. propagat…

[whl]树莓派armv7l文件onnx的whl所有下载地址汇总

下面onnx所有版本都是树莓派armv7l平台的whl文件,不能用于windows,macOS或者ubuntu x86_64的系统,请认准文件名及其对应python版本下载。 序号版本名称下载地址1onnx-1.16.1-cp311-cp311-linux_armv7l.whl点我下载2onnx-1.16.0-cp311-cp311-linux_armv7…