防抖与节流的使用场景与实现

防抖与节流的使用场景与实现

    • 防抖
    • 节流

防抖

防抖是一种常见的 JavaScript 技术,用于控制频繁触发的事件,例如窗口大小调整、鼠标移动、键盘输入等。防抖的目的是减少事件触发的频率,提高页面性能。

防抖原理是多次触发,只执行一次(类似于英雄联盟回城6秒,如果回城中被打断,再次回城需要再等6秒)。

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

function debounce(func, delay) {let timer;return function(...args) {if (timer) {clearTimeout(timer);}timer = setTimeout(() => {func.apply(this, args);}, delay);};
}

使用方法

const handleResize = debounce(() => {console.log('窗口大小发生变化');
}, 300);window.addEventListener('resize', handleResize);

在这个实现中:

debounce 函数接受两个参数:
func: 需要防抖的函数
delay: 防抖的延迟时间(毫秒)
返回一个新的函数,这个新函数会在事件触发时被调用。
在新函数内部,首先检查是否有未完成的定时器,如果有则清除。
然后设置一个新的定时器,在 delay 毫秒后执行原始的 func 函数。
如果在 delay 毫秒内事件再次触发,则会重置定时器,从而达到防抖的效果。

节流

节流是另一种常见的 JavaScript 技术,用于控制频繁触发的事件。与防抖不同的是,节流会保证一个函数在一定时间内只执行一次。这在处理滚动、拖拽等高频率事件时非常有用。

节流的原理是立即触发,之后忽略用户操作,规定时间后才会再次触发(节流类似于英雄联盟里的英雄平A,一定时间内点击多次只进行攻击一次)

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

function throttle(func, delay) {let lastTime = 0;return function(...args) {const now = new Date().getTime();if (now - lastTime > delay) {lastTime = now;func.apply(this, args);}};
}

使用方法

const handleScroll = throttle(() => {console.log('页面滚动');
}, 500);window.addEventListener('scroll', handleScroll);

在这个实现中:

throttle 函数接受两个参数:
func: 需要节流的函数
delay: 节流的延迟时间(毫秒)
返回一个新的函数,这个新函数会在事件触发时被调用。
在新函数内部,首先获取当前的时间戳。
然后判断当前时间与上次执行时间的差值是否大于 delay。
如果大于 delay,则执行原始的 func 函数,并更新上次执行时间。
如果小于 delay,则不执行原始的 func 函数。

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

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

相关文章

通过rpmbuild构建Elasticsearch-7.14.2-search-guard的RPM包

系列文章目录 rpmbuild从入门到放弃 search-guard插件使用入门手册 文章目录 系列文章目录前言一、资源准备二、spec文件1.基础信息2.%prep3.%Install4.%file5.%post6.%postun 三、成果演示1.执行构建过程图示例2.执行安装RPM包示例3.进程检查4.访问esApi 总结 前言 不管是源…

echarts折线图实现矩形圈中的点可拖拽,圈外的点不可拖拽

原生HTML JavaScript版本 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>曲线形式的统计图示例</title><script src"https://cdnjs.cloudflare.com/ajax/libs/echarts/4.9.0-rc.1/echarts.min.js"&g…

命令执行(RCE)面对各种过滤,骚姿势绕过总结

1、什么是RCE RCE又称远程代码执行漏洞&#xff0c;可以让攻击者直接向后台服务器远程注入操作系统命令或者代码&#xff0c;从而控制后台系统。 2、RCE产生原因 服务器没有对执行命令的函数做严格的过滤&#xff0c;最终导致命令被执行。 3、命令执行函数 PHP代码执行函数…

软件项目运维服务方案(Word原件)

1.项目情况 2.服务简述 2.1服务内容 2.2服务方式 2.3服务要求 2.4服务流程 2.5工作流程 2.6业务关系 2.7培训 3.资源提供 3.1项目组成员 3.2服务保障 软件文档全套下载&#xff1a;本文末个人名片直接获取或者进主页。

喝酒骰子夜店手灯轮盘扫雷鳄鱼拆弹你演我猜小游戏流量主小程序开源版开发

喝酒骰子夜店手灯轮盘扫雷鳄鱼拆弹你演我猜小游戏流量主小程序开源版开发 喝酒摇骰子、轮盘、扫雷大战、夜店手灯、鳄鱼拔牙、喝酒大叔、指尖光环、拆弹英雄、幸运转转转、你演我猜、眼疾手快、占领方块、你演我猜。 喝酒骰子类小程序通常包含多种互动游戏和娱乐功能&#xf…

深入剖析数据库索引

写在前面&#xff1a; 此博客内容已经同步到我的博客网站&#xff0c;如需要获得更优的阅读体验请前往https://mainjaylai.github.io/Blog/blog/database 文章目录 如何验证我们正在使用InnoDB引擎 主键如果你没有自己创建任何主键会发生什么&#xff1f;关键字和索引之间的区别…

HR8870:H桥PWM直流电机驱动IC性能指标和应用方案选型

HR8870芯片描述 HR8870是一款直流有刷电机驱动器&#xff0c;适用于打印机、电器、工业设备以及其他小型机器。两个逻辑输入控制H桥驱动器&#xff0c;该驱动器由四个N-MOS组成&#xff0c;能够以高达4.5A的峰值电流双向控制电机。利用电流衰减模式&#xff0c;可通过对输入进行…

vue3实现简单登录页面

使用 Vue3 ts scss element-plus 实现简单的用户登录界面&#xff0c;登录方式包括&#xff1a;手机验证码登录、手机账号密码登录、扫码登录&#xff0c;效果如下图所示&#xff1a; 详细代码&#xff1a; 模版部分 <template><div class"login">&l…

阿里云Elasticsearch-趣味体验

阿里云Elasticsearch-趣味体验 什么是阿里云Elasticsearch阿里云Elasticsearch开通服务查看Elasticsearch实例配置Kibana公网IP登录Elasticsearch添加测试数据 Kibana数据分析查看数据字段筛选数据页面条件筛选KQL语法筛选保存搜索语句导出筛选结果指定列表展示字段写在最后 什…

(硬件05)电流检测中运放的“虚短”与“虚断”

本文目录 本篇前言知识点讲解软件仿真 本篇前言 运放&#xff0c;全称是运算放大器&#xff0c;一般的用法是用来发大电信号的&#xff0c;本篇讲解到的就是通过运算放大器将大电流流过采样电阻后的电压进行放大后输出给单片机的ADC&#xff0c;单片机根据ADC的值&#xff08…

Commons-Collections篇-CC7链

前言 和CC5反序列化链相似&#xff0c;CC7也是后半条LazyMap执行命令链不变&#xff0c;但是中间过程通过AbstractMap.equals()触发LazyMap.get()方法 环境 我们可以接着使用之前已经搭建好的环境&#xff0c;具体过程可以看CC1分析文章的环境安装部分 Commons-Collections篇…

leecode-动态规划-基础题目

一、简述 DP&#xff0c;如果某一问题有很多重叠子问题&#xff0c;使用动态规划是最有效的。 所以动态规划中每一个状态一定是由上一个状态推导出来的 重点&#xff1a;状态转移公式 二、一维 1、[509]斐波那契数 2、[70]爬楼梯 dp[i]可有dp[i-1]再爬一级台阶dp[i-2]再…

手表名表维修开单系统软件教程,佳易王钟表养护维护保养记录开单软件操作教程

手表名表维修开单系统软件教程&#xff0c;佳易王钟表养护维护保养记录开单软件操作教程 以下软件操作教程以&#xff0c;佳易王钟表养护维修管理系统软件为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 一、软件程序操作教程 1、佳易王钟表维…

第2章 信息技术知识

第2章 信息技术知识 本章简要叙述了信息技术相关基础知识&#xff0c;包含软件工程、面向对象系统分析与设计、应用集成技术、计算机网络技术和新一代信息技术内容。 2.1 软件工程 随着所开发软件的规模越来越大、复杂度越来越高&#xff0c;加之用户需求又并不十分明确&…

k8s上部署单节点apache-lotdb

一、yaml文件 使用的nfs的动态存储类&#xff0c;需要提前搭建。 # cat lotdb.yaml apiVersion: v1 kind: PersistentVolumeClaim metadata:name: logsnamespace: lotdb spec:storageClassName: "nfs-client"accessModes:- ReadWriteManyresources:requests:storag…

Spring Session 多服务Session共享

在新项目中需要开发单点登录功能&#xff0c;单点登录服务端提供方使用的是CAS技术&#xff0c;是根据Session来判断用户是否完成了登录操作的。Session是保存在服务器本地内存中的&#xff0c;而我的项目是需要多服务部署的&#xff0c;这就意味着会部署在不同的服务器中&…

中国百货业元宇宙转型:挑战与机遇并存

在数字化和科技创新的推动下&#xff0c;中国百货业正站在一个新的历史节点上。面对着电子商务的冲击和消费者需求的演变&#xff0c;传统百货业正在经历一场前所未有的转型。而元宇宙&#xff0c;这一全新概念的提出&#xff0c;为百货业的变革带来了无限的想象空间。 **百货…

淘宝商品历史价格查询(免费)

当前资料来源于网络&#xff0c;禁止用于商用&#xff0c;仅限于学习。 淘宝联盟里面就可以看到历史价格 并且没有加密 淘宝商品历史价格查询可以通过以下步骤进行&#xff1a; 先下载后&#xff0c;登录app注册账户 打开淘宝网站或淘宝手机App。在搜索框中输入你想要查询的商…

【Linux操作系统-测试】第二节.Linux 常用指令介绍(下)

文章目录 前言总结 前言 二、查看文件内容 2.1 cat 命令--查看文件内容 2.2 more 命令--分屏查看 2.3 grep 命令--过滤查看 三、linux其他常用命令 3.1 echo 命令--回显 3.2 clear 命令--清屏 3.3 >&#xff0c;>>重定向符号--输出重定向 3.4 管道符号--命令结果传递…

使用 Python 中的 `sklearn` 库实现 KNN 分类

Scikit-Learn 使用 Python 中的 sklearn 库实现 KNN 分类安装 sklearn 库导入库并准备数据使用 sklearn 实现 KNN 分类详细说明重点内容 使用 Python 中的 sklearn 库实现 KNN 分类 K最近邻&#xff08;K-Nearest Neighbors, KNN&#xff09;是一种简单且有效的分类算法。在 P…