介绍一下js的节流与防抖

在JavaScript中,节流(Throttling)和防抖(Debouncing)是两种常用的优化高频率触发事件的策略。它们主要用于限制函数的执行频率,以避免因频繁触发导致的性能问题。

1. 防抖(Debouncing)

防抖的核心思想是:在一定时间间隔内,如果事件被连续触发,那么只有最后一次触发的事件会被执行,如果在这个时间间隔内没有再次触发事件,那么就会执行这个事件。

例如,在搜索框输入内容时,我们希望用户停止输入一段时间(比如500毫秒)后再发送请求,而不是每输入一个字符就发送一次请求。

 
function debounce(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(function() {
func.apply(context, args);
}, wait);
};
}// 使用示例
const myEfficientFn = debounce(function() {
// 假设这是一个高开销的函数
console.log('Resized!');
}, 250);window.addEventListener('resize', myEfficientFn);

2. 节流(Throttling)

节流的核心思想是:在一定时间间隔内,无论事件被触发多少次,都只执行一次。如果在这个时间间隔内再次触发事件,那么会重新计算执行时间。

例如,在滚动事件中,我们希望每隔一段时间(比如200毫秒)只触发一次滚动事件的处理函数,而不是每次滚动都触发。

 
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);
}
};
}// 使用示例
const myEfficientFn = throttle(function() {
// 假设这是一个高开销的函数
console.log('Scrolled!');
}, 250);window.addEventListener('scroll', myEfficientFn);

总结

  • 防抖:确保一个函数在一定时间内只执行一次,如果在这个时间内再次触发该事件,则会重新计算执行时间。
  • 节流:确保一个函数在一定时间内至少执行一次,但不多于一次。

这两种技术都可以有效地优化高频率触发事件的性能,具体使用哪种技术取决于具体的应用场景和需求。

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

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

相关文章

numpy.ndarray是什么类型

numpy.ndarray是什么类型 numpy.ndarray 类型的特点创建 numpy.ndarray示例代码总结 numpy.ndarray是什么类型 numpy.ndarray 是 NumPy 库中的一个核心数据类型,用于表示多维数组。它是 NumPy 中最重要的数据结构之一,提供了高效的数值计算能力。下面是对…

PPP与HDLC的异同

PPP(点对点协议)与HDLC(高级数据链路控制)都是数据链路层协议,用于在两点间提供可靠的通信链接,但它们在设计目标、应用场景、功能特性等方面存在一些显著的异同: 相同点: 目的相似…

nn.Embedding使用

nn.Embedding使用 Embedding.weight会从标准正态分布中初始化成大小为(num_embeddings, embedding_dim)的矩阵 PE矩阵的作用就是替换这个标准正态分布 input中的标号表示从矩阵对应行获取权重来表示单词 # 1.设置embedding结构 max_seq_len 1000 # 句…

配合busco训练Augustus

使用BUSCO的结果来训练Augustus包括以下几个步骤。这些步骤会帮助你利用BUSCO评估的高质量基因来优化Augustus的基因预测模型。 步骤1:运行BUSCO 首先,你需要运行BUSCO来评估你的基因组或转录组。BUSCO会生成一些包含高质量单拷贝直系同源基因的信息文件…

【Java】面向对象的三大特征:封装、继承、多态

封装 什么叫封装? 在我们写代码的时候经常会涉及两种角色: 类的实现者 和 类的调用者。 封装的本质就是让类的调用者不必太多的了解类的实现者是如何实现类的, 只要知道如何使用类就行了,这样就降低了类使用者的学习和使用成本&a…

游戏主播到底是为游戏宣传还是蹭游戏带来的热度

易采游戏网6月1日最新消息:近日知名游戏主播周淑怡在社交平台上发表了自己对《地下城与勇士》手游(简称DNF手游)的点评。作为一款拥有庞大粉丝基础的端游改编作品,DNF手游自发布以来便受到了广泛关注。而周淑怡的点评不仅聚焦于游戏体验本身,…

Python代码:二十七、append函数

1、题目 牛牛有一个name [Niumei, YOLO, Niu Ke Le, Mona] 记录了他最好的朋友们的名字,请创建一个二维列表friends,使用append函数将name添加到friends的第一行。 假如Niumei最喜欢吃pizza,最喜欢数字3,YOLO最喜欢吃fish&…

Linux实验报告(一)——Linux系统安装与简单配置

目录 一、实验名称: 二、仪器、设备: 三、参考资料: 四、实验目的: 五、实验内容(步骤): 六、实验数据(程序)记录: 七、实验结果分析: 八、…

XXE漏洞简介

目录 漏洞原理 漏洞危害 前置知识 XML简介 DTD简介 DTD的两种声明方式 实体 实体分类 内置实体(Built-inentities) 字符实体(Characterentities) 通用实体(Generalentities) 参数实体(Parameterentities) XXE漏洞…

嵌入式Linux shell编程实例

1. 输入两个数,实现两个数的相加 (1)具体实现代码如下 1 #!/bin/bash2 read a3 read b4 sum$(($a$b))5 echo "$sum"(2)编辑完内容后按Esc键再输入:wq保存,回车退出,执行结果如下图&a…

系统安全及其应用

系统安全及其应用 部署服务器的初始化步骤: 1、配置IP地址,网关,DNS解析 2、安装源,外网(在线即可yum) 内网(只能用源码包编译安装) 3、磁盘分区 lvm raid 4、系统权限配置和基础安…

用r语言处理 Excel数据当中的缺失值方法

以下是使用 R 编程语言处理 Excel 缺失数据的一些常见方法示例代码&#xff1a;&#xff08;无需循环&#xff09; 读取包含缺失数据的 Excel 文件 data <- read.csv(“your_file.csv”) 查看数据中是否有缺失值 sum(is.na(data)) 用平均值填充缺失值 data c o l u m …

Django里多app

在 Django 里的某一个项目&#xff0c;里面得包含很多 App (功能)&#xff0c;那么如何在该项目里管理这么多App呢&#xff1f; 先说明下背景&#xff1a;未先创建 apps 文件夹来存各个app文件夹&#xff0c;直接在项目文件目录里创建各个app。为了便于管理&#xff0c;得将各…

WireShark下载安装

下载地址 WireShark站内下载资源&#xff1a;&#xff08;土豪方便下载&#xff09; https://download.csdn.net/download/qq_58662768/89377088 官网下载&#xff1a; Wireshark Go Deep 进入主页后&#xff0c;选择Get Acquainted&#xff0c;再选择Download。 选择合适…

【vue3|第4期】Vue3的选项式与组合式

日期&#xff1a;2024年5月30日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xf…

【IPFS应用开发】基于IPFS的视频播放器

本系列文章是针对 https://blog.csdn.net/weixin_43668031/article/details/83962959 内容的实现所编写的。开发经历包括思考过程、重构和推翻重来。 基于IPFS的视频播放器 想写一个真正的、基于IPFS的&#xff0c;可以播放IPFS上的视频的程序支持多种数据加载格式同时支持单文…

CentOS7某天的samba服务搭建操作记录(还没成功)

#CentOS7 yum软件仓库阿里云 samba服务器配置失败 sensors成功了 (花了200元组装H61测试机&#xff0c;75元的主板只有一块能用&#xff0c;垃圾板但又不完全能用&#xff09; 2024.5月的某天记录如下&#xff1a; https://blog.csdn.net/dszgf5717/article/details/53732182 …

一篇文章讲透数据结构之树

一.树 1.1树的定义 树是一种非线性的数据结构&#xff0c;它是有n个有限结点组成的一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根在上&#xff0c;叶在下的。 在树中有一个特殊的结点&#xff0c;称为根结点&#xff0c;根结点…

Humanoid Whole-body Control

系列文章目录 前言 我们拟举办的研讨会旨在为生物力学和机器人学这两个学科架起一座桥梁&#xff0c;尤其侧重于人体运动分析和仿人机器人的全身控制。将人体运动转化为仿人机器人是一个新兴的跨学科领域。在过去二十年里&#xff0c;传统的双足行走步态生成和基于动态模型优化…

VSCode插件Data Previewer

此插件支持直接在vscode 里对csv&#xff0c;xlsx等数据做可视化、统计探索 1. 安装 2. 使用效果 2.1. yaml文件 2.2. xml文件 2.3. csv文件 可以对文件进行各种分析&#xff0c;如此多的选项 散点图 线图 参考文献 GitHub - RandomFractals/vscode-data-preview: Data Pre…