JS问题:项目中如何区分使用防抖或节流?

前端功能问题系列文章,点击上方合集↑

序言

大家好,我是大澈!

本文约2300+字,整篇阅读大约需要6分钟。

本文主要内容分三部分,第一部分是需求分析,第二部分是实现步骤,第三部分是问题详解。

如果您只需要解决问题,请阅读第一、二部分即可。

如果您有更多时间,进一步学习问题相关知识点,请阅读至第三部分。

1. 需求分析

当用户多次频繁点击按钮时,只允许请求一次后端接口,避免重复无用请求。

没办法,谁让我们的客户就是会1秒点10次的超能力。

图片

2. 实现步骤

2.1 选择防抖,还是节流?

对于控制事件触发的频率,我们应该很容易的就会想到JS中的防抖和节流。

防抖(Debounce)和节流(Throttle)是前端开发中最常用的优化处理方式,相信大家也都会使用。

但是如果谈起两者定义的区分,以及两者应用场景的不同,就会有朋友吐槽:“我靠,这不都一样嘛!”。

图片

所以,我们到底要怎么选择呢?

2.2 两者定义的区分

简单的定义区分:

  • 防抖是一段时间内,多次执行变为只执行最后一次

  • 节流是一段时间内,多次执行变为只执行第一次

详细的定义区分:

  • 防抖(debounce)是指在一段时间内多次触发相同事件时,只执行最后一次触发的事件。

    这意味着,在一系列触发事件中,如果在指定的时间间隔内,发生了新的触发事件,那么前面的触发事件将被忽略,只有最后一次触发事件会被执行。

  • 节流(throttle)是指在一段时间内多次触发相同事件时,只执行一次事件。

    这意味着,无论触发事件发生多少次,在指定的时间间隔内只会执行第一次事件。

最后,再搭配上“大澈原创”之无敌美丽动人草图:

图片

就问你,还有谁还区分不明白防抖和节流的定义,还有谁

图片

2.3 两者应用场景的区分

真实的项目中,在不同的场景下灵活切换使用防抖或节流,才会更加减少不必要的资源消耗,更加提高前端应用的性能和响应性。

防抖(Debounce)的应用场景:

  • 搜索框输入:当用户在搜索框中输入内容时,可以使用防抖来延迟触发搜索请求。只有在用户停止输入一段时间后才会发送请求,避免频繁的请求发送。

  • 窗口调整:当窗口大小调整时,可以使用防抖来优化执行某些操作的频率,例如重新计算布局或重新渲染页面。

  • 按钮点击:当用户点击一个按钮时,可以使用防抖来确保只有在用户停止点击一段时间后才会执行相应的操作,避免误操作或重复执行。

节流(Throttle)的应用场景:

  • 页面滚动:当用户滚动页面时,可以使用节流来限制触发滚动事件的频率。例如,在滚动过程中只执行某些操作的固定时间间隔,以减少事件处理的次数。

  • 鼠标移动:当用户移动鼠标时,可以使用节流来控制触发鼠标移动事件的频率。例如,在一定时间内只执行一次鼠标移动的处理逻辑,避免过多的计算和渲染操作。

  • 实时通信:在实时通信应用中,如聊天应用或在线协作工具,可以使用节流来限制发送消息的频率,以避免发送过多的请求或数据。

2.4 两者的代码实例(了解即可别纠结)

防抖代码实例如下:

// 防抖:点击查询城市接口
var btn1 = document.querySelector("button");
var timer;btn1.onclick = function () {//先清空延时器,然后再去调用接口clearTimeout(timer);// 每次点击按钮都会清空延时器,然后重新计时,延迟一秒执行函数timer = setTimeout(city, 3000);
};function city() {ajax({method: "get",url: "https://geoapi.qweather.com/v2/city/lookup",data: {location: "青岛",key: "759cb11054344aaba4b8791ec40274dd",},aysn: true,contentType: "",success: function (res) {var obj = JSON.parse(res);console.log(obj, "请求成功的数据");},});

节流代码实例如下:

// 节流:鼠标移动在控制台打印坐标
//       fn(3000, handlePrint)
function fn(delay, behavior) {var timer = null;return function (val) {if (!timer) {timer = setTimeout(function () {//调用handlePrint函数behavior(val);timer = null;}, delay);}};
}function handlePrint(val) {console.log(val, "我是鼠标坐标");
}//调用fn把1000和handlePrint这个函数传进去
var handle = fn(3000, handlePrint);document.addEventListener("mousemove", function (e) {handle(e.offsetX);
});

只是看看原理,差不多了解即可,不要太纠结,项目中肯定不会这么使用,不然会被喷的。

Vue等真实项目中,往往都会调用第三方库的函数,具体内容见第三部分。

3. 问题详解

3.1 常用的防抖节流函数库整理

流行的独立JavaScript 库:

  • Lodash (https://lodash.com/):Lodash 是一个功能强大的 JavaScript 实用工具库,提供了丰富的工具函数,包括 debounce 和 throttle。您可以使用 Lodash 中的 debounce 和 throttle 函数来实现相应的功能。

  • Underscore.js (https://underscorejs.org/):Underscore.js 是另一个流行的 JavaScript 实用工具库,类似于 Lodash,也提供了 debounce 和 throttle 函数,供您使用。

  • RxJS (https://rxjs.dev/):RxJS 是一个响应式编程库,它提供了丰富的操作符和工具函数,包括用于实现防抖和节流的操作符。您可以使用 RxJS 中的 debounceTime 和 throttleTime 操作符来实现相应的功能。

  • Async (https://caolan.github.io/async/):Async 是一个流程控制库,提供了多种异步操作的工具函数。它也包含了 debounce 和 throttle 函数的实现,供您使用。

  • Trottle-Debounce (https://github.com/niksy/throttle-debounce):Trottle-Debounce 是一个提供了防抖和节流函数的 JavaScript 库,它可以用于任何 JavaScript 应用程序,不依赖于特定的框架。

特定于框架的JavaScript 库:

  •  VueUse (https://vueuse.org/):VueUse 是一个提供常用 Vue.js 自定义函数的库,其中包括了防抖和节流函数的实现。在 VueUse 中,您可以使用 useDebounce 和 useThrottle 这两个自定义函数来实现防抖和节流功能。

import { useDebounce, useThrottle } from '@vueuse/core';// 防抖
// 在值变化后延迟500毫秒触发
const debouncedValue = useDebounce(value, 500); // 节流
// 将函数封装为节流函数,每300毫秒触发一次
const throttledFunction = useThrottle(myFunction, 300); // 在 Vue 组件中使用防抖和节流
export default {setup() {const debouncedValue = useDebounce(value, 500);const throttledFunction = useThrottle(myFunction, 300);},
}
  • React-use (https://github.com/streamich/react-use):React-use 是一个提供多种自定义 React hooks 的库,其中包括了 useDebounce 和 useThrottle。您可以使用 React-use 中的这些 hooks 在 React 组件中实现防抖和节流功能。

结语

建立这个平台的初衷:

  • 打造一个仅包含前端问题的问答平台,让大家高效搜索处理同样问题。

  • 通过不断积累问题,一起练习逻辑思维,并顺便学习相关的知识点。

  • 遇到难题,遇到有共鸣的问题,一起讨论,一起沉淀,一起成长。

感谢关注微信公众号:“程序员大澈”,然后加入问答群,让我们一起解决实现所有BUG!

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

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

相关文章

CSS 基础知识-02

CSS 基础知识-01 1. flex布局2.定位3.CSS精灵4.CSS修饰属性 1. flex布局 2.定位 3.CSS精灵 4.CSS修饰属性

[③ADRV902x]: Digital Filter Configuration(接收端)

前言 本篇博客主要总结了ADRV9029 Rx接收端链路中各个滤波器的配置。配置不同的滤波器系数以及不同的参数,可以对输入的数字信号灵活得做decimation处理,decimation信号抽取,就是降低信号采样率的过程。 Receiver Signal Path 下图为接收端…

程序化广告系列之一---名词解释

基础 1、DSP:全称“Demand-Side Platform”,需求方平台,是为广告主、代理商提供一个综合性的管理平台,通过统一界面管理多个数字广告和数据交换账户。 2、SSP:SSP是Sell-Side Platform的缩写,即供应方平台…

Linux | 进程地址空间

目录 前言 一、初始进程地址空间 1、实验引入 2、虚拟地址空间 二、什么是进程地址空间 1、基本概念 2、深入理解进程地址空间 3、进程地址空间的本质 4、遗留问题解决 三、为什么要有进程地址空间 1、知识扩展 2、进程地址空间存在意义 3、重新理解挂起 前言 本…

Vue引入异步组件

defineAsyncComponent 函数:异步引入组件。 Suspense 标签:异步引入组件时,显示默认的内容。 异步引入组件的基本使用: 异步引入组件: import { defineAsyncComponent } from vue; const Child defineAsyncComponen…

没有电脑也不用担心,在Android设备上也可以轻松使用ppt

PowerPoint是制作幻灯片的好工具,无论是工作、学校还是个人使用。但有时你无法使用电脑或笔记本电脑,你必须在旅途中做演示。 这就是PowerPoint for Android派上用场的地方。它允许你在移动设备上创建、编辑和呈现幻灯片。以下是要遵循的步骤&#xff1…

【单例模式】饿汉式,懒汉式?JAVA如何实现单例?线程安全吗?

个人简介:Java领域新星创作者;阿里云技术博主、星级博主、专家博主;正在Java学习的路上摸爬滚打,记录学习的过程~ 个人主页:.29.的博客 学习社区:进去逛一逛~ 单例设计模式 Java单例设计模式 Java单例设计模…

031-从零搭建微服务-监控中心(一)

写在最前 如果这个项目让你有所收获,记得 Star 关注哦,这对我是非常不错的鼓励与支持。 源码地址(后端):mingyue: 🎉 基于 Spring Boot、Spring Cloud & Alibaba 的分布式微服务架构基础服务中心 源…

KMS在腾讯云的微服务实践助力其降本50%

背景介绍 KMS 是一家日本的游戏公司,主要经营游戏业务、数字漫画业务、广告业务、云解决方案业务等,出品了多款在日本畅销的漫画风游戏,同时有网络漫画专业厂牌,以内容创作为目标,拥有原创 IP 创作、游戏开发等多元化发…

第三篇:实践篇 《使用Assembler 实现图片任意切割功能》

实现原理: 共用一个texture、material、渲染状态等。紧通过修改vertex、uvs、indexes数据即可实现任意切割功能。 一、线段分割多边形,并分散多边形 线段分割多边形 已知多边形points,线段sp、ep。线段分割多边形得到两个多边形。 publi…

竞赛选题 深度学习人体跌倒检测 -yolo 机器视觉 opencv python

0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 **基于深度学习的人体跌倒检测算法研究与实现 ** 该项目较为新颖,适合作为竞赛课题方向,学长非常推荐! 🥇学长这里给一个题目综合评分(每项满…

oracle,CLOB转XML内存不足,ORA-27163: out of memory ORA-06512: at “SYS.XMLTYPE“,

通过kettle采集数据时,表输入的组件,查询报错。 ORA-27163: out of memory ORA-06512: at “SYS.XMLTYPE”, line 272 ORA-06512: at line 1 通过 ALTER SESSION SET EVENTS ‘31156 trace name context forever, level 0x400’; 修改会话配置 或直接修改…

网络协议--广播和多播

12.1 引言 在第1章中我们提到有三种IP地址:单播地址、广播地址和多播地址。本章将更详细地介绍广播和多播。 广播和多播仅应用于UDP,它们对需将报文同时传往多个接收者的应用来说十分重要。TCP是一个面向连接的协议,它意味着分别运行于两主…

安卓开发实例:方向传感器

调用手机的方向传感器&#xff0c;X轴&#xff0c;Y轴&#xff0c;Z轴的数值 activity_sensor.xml <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayoutxmlns:android"http://schemas.android.c…

结构伪类选择器

伪类选择器&#xff1a;用来描述一个元素的特殊状态&#xff01;比如第一个元素、某个元素的子元素、鼠标点击的元素 1 first-child/last-child /*ul的第一个子元素*/ ul li:first-child{ background: #0f35ad; } /*ul的最后一个子元素*/ ul li:last-child{ background: #0f3…

ExcelPatternTool 开箱即用的Excel工具包现已发布!

文章目录 ExcelPatternTool功能特点&#xff1a;快速开始使用说明常规类型高级类型Importable注解Exportable注解IImportOption导入选项IExportOption导出选项单元格样式StyleMapping样式映射使用数据库作为数据源 示例Sample1&#xff1a;不同类型字段导出Sample2&#xff1a;…

ChatGLM系列七:LangChain+ChatGLM-6B

背景介绍 在开发过程中&#xff0c;我们经常会遇到需要构建基于本地知识库的问答系统的问题。这种系统需要能够根据用户提供的问题&#xff0c;在本地的知识库中查找并返回相关答案。然而&#xff0c;要实现这样的功能并不容易&#xff0c;涉及到语言模型的选择、知识库的管理…

Vsan数据恢复—Vsan存储断电导致虚拟机无法启动的数据恢复案例

Vsan分布式存储故障&检测&#xff1a; 异常断电导致一台vsan存储设备上层虚拟机无法启动。 将故障Vsan存储上的所有磁盘编号后取出&#xff0c;由北亚企安的硬件工程师对vsan存储上的所有硬盘进行物理故障检测&#xff0c;经过检测没有发现硬盘存在物理故障。 vsan存储结构…

问界新M7也扛起“遥遥领先”大旗,华为究竟做对了什么?

循着时间脉络&#xff0c;华为似乎正在实现全方面的“遥遥领先”。 继Mate 60系列手机产品的强势回归之后&#xff0c;华为参与的汽车项目也登上了“热搜榜”。近段时间&#xff0c;问界新M7正处于“卖爆”状态。 据了解&#xff0c;2023年9月12日&#xff0c;华为发布了问界…

公网IP怎么设置?公网ip有哪些优点和缺点?

随着互联网的普及&#xff0c;越来越多的人开始关注网络安全和隐私保护。其中&#xff0c;公网IP的设置成为了一个备受关注的话题。本文将详细介绍公网IP的设置方法以及公网IP的优点和缺点。 一、公网IP设置方法 1. 路由器设置 在家庭或企业网络中&#xff0c;路由器通常是最重…