当前位置: 首页 > news >正文

JS防抖和节流

 一、防抖和节流的适用场景

  • 防抖(Debounce): 适合在输入框输入时的实时搜索、窗口大小调整时的resize事件等。
  • 节流(Throttle): 适合如页面滚动时的scroll事件、按钮点击时的请求发送等需要控制频率的场景。

二、防抖

解释:在设置的时间间隔内连续点击多次,只执行最后一次(时间间隔大于设置的时间)的点击。

例如:某个支付按钮,不加防抖函数,如果用户在一瞬间连续点击很多次,就可能会出现生成多个订单的情况。搜索框用户输入文字调用搜索接口等等等....

函数如下:设置连续两次点击的时间间隔为1秒。

data(){
return {clearId:null}
}methods:{debounce() {// 两次点击的时间间隔小于1秒则清除定时器重新计时,否则就执行函数内部逻辑clearInterval(this.clearId)this.clearId = setTimeout(() => {// 发送请求 / 执行逻辑this.doAjax()}, 1000)}
}

 

三、节流

解释:控制函数的执行频率,使得函数在短时间内多次触发时,只执行一次或者以指定的频率执行。它可以有效地减少函数的执行次数,特别是在处理一些高频率触发的事件(比如浏览器的滚动事件、resize事件、input输入事件等)时非常有用,可以优化性能和用户体验,只允许在规定的时间内执行一次。

例如:浏览器的滚动事件、resize事件、input输入事件等高频率触发的事件,节流函数可以确保函数在一定时间间隔内最多执行一次,即使它在短时间内被频繁调用。

data () {return {timer: 0}
},
methods:{throttle() {// 创建一个时间戳赋值给timer 下次的时间戳减去上次的时间戳 间隔大于1s 才会去固定触发这个函数,只要小于1s永远不会触发const curClickTime = Date.now()if (curClickTime - this.timer > 1000) {this.doAjax()  //大于1s调用函数this.timer = curClickTime } else {console.log('时间间隔小于一秒', curClickTime )} }
}

 四、防抖和节流的区别

共同点: 都可以用来控制某个函数在短时间内被频繁调用时的执行次数,从而优化性能和避免不必要的计算或请求。

不同点 :思路不同

  1. 防抖:某个时间内不能再次触发,一旦触发,就要重新计算

  2. 节流:限制相邻两次调用的时间间隔

总结:

防抖和节流都是为了优化性能而设计的方法,但在具体应用时需要根据不同的场景选择合适的方式。防抖更多用于避免短时间内频繁触发,节流则更多用于限制一定时间内的触发次数。

相关文章:

JS防抖和节流

一、防抖和节流的适用场景 防抖(Debounce): 适合在输入框输入时的实时搜索、窗口大小调整时的resize事件等。节流(Throttle): 适合如页面滚动时的scroll事件、按钮点击时的请求发送等需要控制频率的场景。 …...

OpenWrt 为软件包和docker空间扩容

参考资料 【openwrt折腾日记】解决openwrt固件刷入后磁盘空间默认小的问题,关联openwrt磁盘扩容空间扩容【openwrt分区扩容】轻松解决空间可用不足的尴尬丨老李一瓶奶油的YouTube 划分空间 参考一瓶奶油的YouTube 系统 -> 磁盘管理 -> 磁盘 -> 修改 格…...

重要的工作任务,怎么在电脑桌面设置倒计时?

在日常工作中,我们总是面临着众多工作任务,如何高效地管理和完成这些任务成为了每个职场人的必备技能。为任务设置倒计时,不仅能让我们清晰地看到任务的先后顺序,还能帮助我们更好地把握时间,提高工作效率。想象一下&a…...

Failed to build get_cli:get:的解决方案

项目场景: 今天安装Getx命令行的时候,输入这面文档报了一个错: dart pub global activate get_cli 问题描述 提示:这里描述项目中遇到的问题: 例如:数据传输过程中数据不时出现丢失的情况,偶尔…...

短视频矩阵源码技术分享

在当今数字媒体时代,短视频已成为吸引观众和传递信息的重要手段。对于开发者而言,掌握短视频矩阵源码技术不仅是提升自身技能的需要,更是把握行业发展趋势的必然选择。本文将深入探讨短视频矩阵源码的关键技术要点及其实现方法,帮…...

轮播图自定义内容

官网&#xff1a;Swiper演示 - Swiper中文网 下载&#xff1a; npm i swiper Vue3示例代码&#xff1a; <template><div class"swiper mySwiper"><div class"swiper-wrapper"><div class"swiper-slide"><div>…...

大数据-44 Redis 慢查询日志 监视器 慢查询测试学习

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…...

Istio_01_Istio初识

文章目录 IstioService Mesh Istio Istio: 以服务网格形态用于服务治理的开放平台和基础设施 本质: 以非侵入式治理服务之间的访问和调用服务治理: 流量管理、可观测性、安全性可同时管理多类基础设施(多种网络方案) 如: Istio和Kubernetes架构的结合 Istio通过Kubernetes的域…...

leetcode日记(47)螺旋矩阵Ⅱ

这题思路不难&#xff0c;就是找规律太难了。 我首先的思路是一行一行来&#xff0c;根据规律填入下一行的数组&#xff0c;第i行是由前i个数字&#xff08;n-2*i&#xff09;个增序数列后i个数字组成&#xff0c;后来觉得太难找规律了就换了一种思路。 思路大致是先计算出需…...

centos系统mysql主从复制(一主一从)

文章目录 mysql80主从复制&#xff08;一主一从&#xff09;一、环境二、服务器master1操作1.开启二进制日志2. 创建复制用户3. 服务器 slave1操作4. 在主数据库中添加数据 mysql80主从复制&#xff08;一主一从&#xff09; 一、环境 准备两台服务器&#xff0c;都进行以下操…...

IEDA怎么把springboot项目 启动多个

利用Idea提供的Edit Configurations配置应用参数。 点击Modify Options进行添加应用参数&#xff1a; 确保这里勾选...

Vue 3项目安装Element-Plus

Element Plus 是一个基于 Vue 3 的现代前端UI框架&#xff0c;它旨在提升开发体验&#xff0c;并为开发者提供高效、优雅的组件。如果你正在使用 Vue 3 进行项目开发&#xff0c;那么安装和集成 Element Plus 是一个不错的选择。在本文中&#xff0c;博主将详细介绍如何在 Vue …...

Git下载安装

一、介绍 Git是一个分布式版本控制系统&#xff0c;最初由Linus Torvalds创建&#xff0c;用于管理和跟踪代码的变化。它可以轻松地处理个人项目和大型团队项目的版本控制需求。 Git的主要特点包括&#xff1a; 分布式&#xff1a;每个开发者都可以拥有自己的本地仓库&#x…...

linux中的目录操作函数

参考 【Linux系统编程】Linux 文件系统探究&#xff1a;深入理解 struct dirent、DIR 和 struct stat结构 stat函数 C标准库提供了访问linux的目录的函数接口现对目录的操作。 一、libc接口 libc访问目录的流程为&#xff1a;打开目录&#xff0c;访问目录&#xff0c;关闭目…...

JSON 文件第一段飘红

问题 原因 这个问题通常发生在尝试用 ESLint 去解析 JSON 文件时。ESLint 主要设计用于检查 JavaScript 代码的语法和风格&#xff0c;而JSON是一种数据交换格式&#xff0c;不包含 JavaScript 的逻辑结构&#xff0c;如函数、变量声明等。 解释报错原因 当ESLint遇到它不能识…...

go使用gjson操作json数据

gjson使用 gjson介绍安装gjson库解析 JSON 字符串路径语法复杂查询遍历和修改结论 gjson介绍 gjson 是一个 Go 语言库&#xff0c;用于快速解析 JSON 数据。它提供了非常简洁的 API 来查询 JSON 数据&#xff0c;无需预先定义 Go 结构体或映射&#xff08;map&#xff09;来匹…...

Mac 下华为鸿蒙 :DevEco Studio 开发工具下载

1.登录&#xff1a;华为开发者中心--开发--下载工具DevEco Studio 2.下载完成后 &#xff0c;安装&#xff0c;并创建一个新项目。 3.Tools --点击SDK Manager 下载SDK: 如果报&#xff1a;淘宝镜像源错误&#xff1a; npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_H…...

C进阶—动态内存管理

这里写目录标题 动态内存分配的原因动态内存函数mallocfreecallocrealloc C/C内存开辟柔性数组柔性数组特点 动态内存分配的原因 常见的内存开辟方式&#xff1a; int a 10;//在栈空间上开辟4个字节 char arr[10] {0};//在栈空间上开辟连续的10个字节上述开辟的空间问题&am…...

QT表格显示MYSQL数据库源码分析(七)

一. 连接MySQL数据库 首先&#xff0c;创建了一个QSqlDatabase对象&#xff0c;并设置数据库类型为"QMYSQL"。然后&#xff0c;它设置了数据库的主机名&#xff0c;端口号&#xff0c;数据库名&#xff0c;用户名和密码。最后&#xff0c;尝试打开数据库连接&#x…...

excel系列(三) - 利用 easyexcel 快速实现 excel 文件导入导出

一、介绍 在上篇文章中&#xff0c;我们介绍了 easypoi 工具实现 excel 文件的导入导出。 本篇我们继续深入介绍另一款更优秀的 excel 工具库&#xff1a;easyexcel 。 二、easyexcel easyexcel 是阿里巴巴开源的一款 excel 解析工具&#xff0c;底层逻辑也是基于 apache p…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...