当前位置: 首页 > 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…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...