你知道什么是防抖和节流吗?

目录

1 先举个例子 

2 使用场景

3 代码实现

3.1 防抖的实现

3.2 节流的实现


1 先举个例子 

防抖,更像是坐电梯,早上眼看9点了,都着急坐电梯上去打卡,但眼看电梯要关了,进来一个人,等几秒,这几秒钟进来人他不关,几秒后他就关。眼看电梯要上去了,要关了,又有人按了一下,又等几秒。要不老有人着急按下那个“—><—”键呢。

所以防抖就是,遇到重复事件,就往后重新计时;

节流更像是坐火车,火车是有时刻表的,哪怕车站人来人往,不断有人要来坐车,从北京去上海或者去天津,我就是15分钟一趟,15分钟就车就开走,乘客们抓紧了啊。

所以节流就是,遇到重复执行,爱重复不重复,15分钟后准时来一次。

2 使用场景

防抖的使用场景:

  • 比如手机号,邮箱,或者用户输入一些内容,输入的这些信息需要验证库里是否存在这种操作,肯定是希望用户输完去验证的;
  • 比如用户调整窗口大小,那个resize事件肯定是一直在执行,所以需要执行完成后再计算大小,做一些操作,防止频繁渲染;

节流的使用场景:

  • 节流是说固定时间执行一次,比如下拉加载,也不能一下拉就重新请求数据,下拉完了就请求肯定不行,万一他隔3秒下拉一次呢,所以就是直接节流,限定长一些时间一次,就像发车时刻表一样;

3 代码实现

3.1 防抖的实现

function debounce(func, delay) {let timeoutId;return function() {const context = this;const args = arguments;clearTimeout(timeoutId);timeoutId = setTimeout(function() {func.apply(context, args);}, delay);};
}

这个 debounce 函数接受两个参数:

  • func: 要延迟执行的函数。
  • delay: 延迟时间(以毫秒为单位)。

它返回一个新函数,该函数在被调用时会启动一个定时器,在延迟时间后执行 func 函数。如果在延迟时间内该函数被再次调用,则会清除之前的定时器,并重新启动一个新的定时器。

示例用法:

// 假设有一个函数 handleInput,我们希望延迟执行它
function handleInput() {console.log("Input handled");
}// 创建一个防抖函数
const debounceHandleInput = debounce(handleInput, 300); // 300 毫秒延迟// 用于输入框输入事件
inputBox.addEventListener('input', debounceHandleInput);

3.2 节流的实现

function throttle(func, delay) {let lastExecutedTime = 0;return function() {const currentTime = Date.now();if (currentTime - lastExecutedTime > delay) {func.apply(this, arguments);lastExecutedTime = currentTime;}};
}

这个 throttle 函数接受两个参数:

  • func: 要限制执行频率的函数。
  • delay: 限制的时间间隔(以毫秒为单位)。

它返回一个新函数,该函数在被调用时会检查上一次执行 func 函数的时间,如果距离上一次执行的时间超过了 delay,则再次执行 func 函数,并更新上一次执行的时间。

示例用法:

// 假设有一个函数 handleScroll,我们希望限制它的执行频率
function handleScroll() {console.log("Scroll event handled");
}// 创建一个节流函数
const throttleHandleScroll = throttle(handleScroll, 300); // 300 毫秒限制// 监听滚动事件
window.addEventListener('scroll', throttleHandleScroll);

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

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

相关文章

uniapp乡村社区户籍问外来人员管理系统 微信小程序python+java+node.js+php

基于微信小程序的外来人员管理系统项目的概述设计分析&#xff0c;主要内容有的私教预约平台系统平台的具体分析&#xff0c;进行数据库的是设计&#xff0c;数据采用MySQL数据库&#xff0c;并且对于系统的设计采用比较人性化的操作设计&#xff0c;对于系统出现的错误信息可以…

YOLO的版本及进阶历史

YOLO&#xff08;You Only Look Once&#xff09;系列算法是目标检测领域的重要进展&#xff0c;以其速度快和性能优异而著称。以下是YOLO系列的版本及进阶历史的概述&#xff1a; 1. YOLOv1&#xff1a;由Joseph Redmon等人在2016年提出&#xff0c;是YOLO系列的开山之作。它…

信创 | 信创产业人才需求与培养机制:优化策略与实践探索

信创产业的人才需求与培养机制面临着多方面的挑战和机遇。首先&#xff0c;信创产业的快速发展带来了巨大的人才需求&#xff0c;但目前人才培养供给与企业发展需求之间存在不匹配的问题。这种不匹配主要表现在课程体系不健全、产教融合不够深入、校企联动性不足以及职业培训市…

探索动态内存开辟的奥秘

✨✨欢迎&#x1f44d;&#x1f44d;点赞☕️☕️收藏✍✍评论 个人主页&#xff1a;秋邱博客 所属栏目&#xff1a;C语言 前言 开始之前&#xff0c;我们先来了解一下C/C中程序内存区域划分。 在C/C程序中&#xff0c;内存区域通常被划分为以下几个部分&#xff1a; 1.栈&…

学习java中的final关键字,常量和抽象类

1.final的特点 final关键字是最终的意思&#xff0c;可以用来修饰类&#xff0c;方法和变量。 修饰类&#xff1a;该类就被称为最终类&#xff0c;特点是不能被继承。比如方法类。 修饰方法&#xff1a;该方法就被成为最终方法&#xff0c;特点是本能被重写。 修饰变量&…

HTMLElement对象

HTMLElement对象 任何HTML元素都继承于HTMLElement对象&#xff0c;一些元素直接实现这个接口&#xff0c;而另一些元素通过多层继承来实现它。 属性 从其父元素Element继承属性&#xff0c;并从DocumentAndElementEventHandlers、ElementCSSInlineStyle、GlobalEventHandle…

第16章 基于结构的测试技术(白盒测试技术)

一、静态测试技术 &#xff08;一&#xff09;概述 不运行程序代码的情况下&#xff0c;通过质量准则或其他准则对测试项目进行检查的测试类型&#xff0c;人工或工具检查。 1、代码检查 2、编码规则检查 3、静态分析 静态分析概述 不需要执行程序 控制流分析 通过生成…

短视频矩阵系统源码==3年源头开发

一 短视频矩阵系统具备以下特点: 1.内容管理功能:用户可以在系统中多账号托管 一次性上传、编辑和发布多个短视频平台的内容&#xff0c;无需在每个平台上重复操作&#xff0c;从而提高工作效率并保持内容的一致性和高质量 2.批量剪辑视频:系统支持上传批量素材管理剪辑 视频…

【前端——bug】使用antd的Input组件无法通过ref修改value

问题背景 我要制作个人博客的chatgpt聊天页面&#xff0c;为了样式统一&#xff0c;我使用了antd的input组件&#xff0c;并且添加了ref属性获取当前输入的内容。我的预期效果是 向输入框输入完成后&#xff0c;按下enter&#xff0c;把输入框置空 const message ref.curre…

Visual studio调试技巧

Visual studio调试技巧 bug是什么&#xff1f;Debug和ReleaseDebugRelease 如何调试VS调试快捷键调试过程中查看程序信息查看临时变量的值查看内存信息查看调用堆栈查看汇编信息查看寄存器信息 编译常见错误编译型错误链接型错误运行时错误 bug是什么&#xff1f; bug的英文释…

springcloud(智慧养老平台)

开发语言&#xff1a;Java JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09;服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.6/5.7&#xff08;或8.0&#xff09;数据库工具&#xff1a;Navicat 开发软件&#xff1a;idea 依赖管理包&#xff1a;Maven 代码数据库…

SAM:Segment Anything Model

论文&#xff08;ICCV&#xff0c;fackbook&#xff09;&#xff1a;Segment Anything 源码&#xff1a; https://github.com/facebookresearch/segment-anything demo&#xff1a;Segment Anything | Meta AI (segment-anything.com) 一、摘要 本文介绍了“Segment Anything…

活动回顾 | 春起潮涌——硬件驱动的量化交易与AI

4月20日&#xff0c;华锐技术ACLUB联合AMD在上海举办了“春起潮涌——硬件驱动的量化交易与AI”沙龙活动&#xff0c;会议围绕FPGA硬件加速、CPU&网卡调优、AI技术应用等展开&#xff0c;近50位量化IT与分享嘉宾一起探讨硬件技术在量化交易和AI领域的应用和创新。 FPGA在交…

构筑稳固基石:HTML网站架构与结构设计的深度探索

构筑稳固基石&#xff1a;HTML网站架构与结构设计的深度探索 在万维网的广阔天地里&#xff0c;每一个网站都是信息的港湾&#xff0c;而HTML作为这一切的基础&#xff0c;其架构与结构设计直接决定了站点的可访问性、可维护性和扩展性。本文将带你深入HTML的架构世界&#xf…

【C++第七课-string用法】

这里写自定义目录标题 string的初步介绍sring的构造函数string的构造函数-重点掌握无参的构造函数用常量字符串来初始化拷贝构造 string的构造函数-非重点掌握拷贝字符串str从pos位置开始的len个字符拷贝字符串s的前n个字符用n个c去初始化 string的赋值string的遍历和访问下标[…

爬虫自动化之drissionpage实现随时切换代理ip

目录 一、视频二、dp首次启动设置代理三、dp利用插件随时切换代理一、视频 视频直接点击学习SwitchyOmega插件使用其它二、dp首次启动设置代理 from DrissionPage import ChromiumPage, ChromiumOptions from loguru

matplotlib/seaborn 绘图可视化全面总结

1.概述 使用Matplotlib 绘图实现可视化时&#xff0c;会面临不同的需求有所调整&#xff0c;本文档重点对绘图过程中产生的一些小众需求进行全面总结&#xff0c;其他任务时可以随时即抽即用。 2.绘图 2.1 一般绘图 plt.figure() 参数设置说明 matplotlib.pyplot.figure( …

C++设计模式-创建型设计模式

设计模式 设计模式是什么 设计模式是指在软件开发中&#xff0c;经过验证的&#xff0c;用于解决在特定环境下&#xff0c;重复出现的&#xff0c;特定问题的解决方案&#xff1b;其实就是解决问题的固定套路。但是要慎用设计模式&#xff0c;有一定的工程代码量之后用它比较…

【论文阅读】Tutorial on Diffusion Models for Imaging and Vision

1.The Basics: Variational Auto-Encoder 1.1 VAE Setting 自动编码器有一个输入变量x和一个潜在变量z Example. 获得图像的潜在表现并不是一件陌生的事情。回到jpeg压缩&#xff0c;使用离散余弦变换&#xff08;dct&#xff09;基φn对图像的底层图像/块进行编码。如果你给…

git ,查看某个版本的某个文件内容

如题&#xff0c;右键 open git bash here, 打开git命令行&#xff1a; 首先&#xff1a; git log 可以查看历史提交的记录&#xff0c;拷贝某个版本的版本号&#xff0c; 类似如&#xff1a; commit 1ba842efcf8076a24d7fb5d6c6323e801ccbf3ff Author: &#xff58;&…