前端开发之 节流与防抖

防抖节流的作用是什么?

节流(throttle)与 防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。

其实很多前端框架都自带节流防抖功能,比如uniapp 好多框架都自带,当然没有自己也可以写,配合后端的限流 \ 熔断 \ 缓存 ,可以让服务器减轻不少压力.

防抖:是指在一定时间内,在动作被连续频繁触发的情况下,动作只会被执行一次,也就是说当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间,所以短时间内的连续动作永远只会触发一次,比如说用手指一直按住一个弹簧,它将不会弹起直到你松手为止。

节流:是指一定时间内执行的操作只执行一次,也就是说即预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期,一个比较形象的例子是人的眨眼睛,就是一定时间内眨一次。

防抖函数应用场景:

就比如说这段代码:

   let btn = document.getElementById('btn')btn.addEventListener('click', function() {console.log('提交');  // 换成ajax请求})

当你点击按钮N下,它就会打印N次“提交”,但如果把 console 换成 ajax 请求,可想而知后端接受到触发频率如此之高的请求,造成的页面卡顿甚至瘫痪的后果。

防抖函数的核心:

面对此种情形,我们必须在原有的基础上作出改进,做到在规定的时间内没有下一次的触发,才执行的效果。

那么首先我们要做的,就是创建一个防抖函数,这个函数的功能是设置一个定时器,每次点击都会触发一个定时器输出,但如果两次点击的间隔小于1s,则销毁上一个定时器,达到最后只有一个定时器输出的效果。

定时器:

在防抖节流中,最为重要的一个部分就是定时器,就比如下面这段代码,setTimeout的功能就是设置一个定时器,让setTimeout内部的代码延迟执行在 1000 毫秒后。

  setTimeout(function(){console.log('提交');}, 1000)

特别需要注意一点的是,定时器中回调函数里的 this 指向会更改成指向 window。

于是我们创建专门的debounce函数用于实现防抖,把handle交给debounce处理,再在debounce内部设置一个setTimeout定时器,handle的执行推迟到点击事件发生的一秒后,这样一来,我们就实现了初步的想法。

  let btn = document.getElementById('btn')function handle(){console.log('提交', this);     // 换成ajax请求}// 创建专门的debounce函数用于防抖,把handle交给debounce处理btn.addEventListener('click', debounce(handle))  // 将点击事件推迟一秒function debounce(fn){return function()  {// 设置定时器setTimeout(fn, 1000)}}

那么关键来了,我们又在原基础上添加一个timer用于接收定时器返回的值(通常称为定时器的ID),然后设置clearTimeout(timer)通过timer取消之前通过 setTimeout 创建的定时器。

通过这段代码,我们便实现了如果在 1s 内频繁点击的话,上一次点击的事件都会被下一次点击取消,从而达到规定的时间内没有下一次的触发,再执行的防抖目的!

  let btn = document.getElementById('btn')function handle(){console.log('提交', this);     // 换成ajax请求}// 创建专门的debounce函数用于防抖,把handle交给debounce处理btn.addEventListener('click', debounce(handle))  // 防抖函数function debounce(fn){let timer = null;        // 接收定时器返回的IDreturn function()  {// 设置定时器clearTimeout(timer);     // 取消之前通过 `setTimeout` 创建的定时器timer = setTimeout(fn, 1000);}}

但是别忘了,我们之前提到过,定时器改变了handle中 this 指向,要做到尽善尽美,我们必须通过显示绑定修正 this 的指向。

同时别忘记还原原函数的参数。

利用箭头函数不承认 this 的特性,我们将代码修改成这样:

  let btn = document.getElementById('btn')function handle(e){console.log('提交');     // 换成ajax请求}// 创建专门的debounce函数用于防抖,把handle交给debounce处理btn.addEventListener('click', debounce(handle))  // 防抖函数function debounce(fn){let timer = null;        // 接收定时器返回的IDreturn function(e)  {// 设置定时器clearTimeout(timer);timer = setTimeout(() => {fn.call(this,e);  //  修正this的同时归还原函数的参数}, 1000)}}
防抖函数核心机制:

同时需要理解的是:防抖函数的核心机制就是闭包,当每一次点击会产生debounce执行上下文,随后debounce执行完其上下文又被反复销毁,但是其中的变量timer又始终保持着对function外部的引用,于是由此形成了闭包。

关于 this 的指向可以参考这篇文章:juejin.cn/post/739763…

关于闭包概念可以参考这篇文章:juejin.cn/post/739762…

总结:

那么现在我们可以总结出这个防抖函数的核心理念四大要点

核心理念:点击按钮后,做到在规定的时间内没有下一次的触发,才执行

  1. 其中debounce返回一个函数体,跟debounce形成了一个闭包。
  2. 子函数体中每次先销毁上一个setTimeout,再创建一个新的setTimeout
  3. 最后需要 还原原函数的 this 指向。
  4. 最后需要 还原原函数的参数。

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

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

相关文章

unity 一个物体随键盘上下左右旋转和前进的脚本

注意:脚本挂在gamaobject 上面 ,操作对象的目标 this.gameObject 为操作对象 using System.Collections; using System.Collections.Generic; using UnityEngine;public class changePosition : MonoBehaviour {//操作对象的目标 this.gameObject 为操…

C# 事件编程详解

文章目录 1.什么是事件?2.事件的声明与使用2.1 声明事件2.2 订阅与触发事件3.事件的核心概念3.1 事件处理委托3.2 自定义事件参数4.事件的高级用法4.1 多播委托与事件4.2 事件解除订阅4.3 自定义事件访问器5.事件的应用场景5.1 GUI 应用程序中的事件5.2 基于事件的编程模型5.3…

C# 属性与结构

C# 属性 C# 属性,属性是一种特殊的类成员。 我们使用预定义的 set 和 get 方法来访问和修改它们。 属性读取和写入会转换为获取和设置方法调用。 与使用自定义方法调用(例如object.GetName())相比,使用字段符号(例如o…

Linux系统性能调优技巧详解

Linux系统性能调优技巧详解 在Linux系统中,性能调优是确保系统在高负载下依然能够稳定、高效运行的重要环节。调优的目标包括优化系统资源的利用率(如CPU、内存、磁盘和网络),减少瓶颈,并提升系统的响应速度。本文将深入探讨Linux系统性能调优的技巧,并结合代码使用案例…

视频里的音频怎么提取出来成单独文件?音频提取照着这些方法做

在数字时代,视频与音频的分离与重组已成为日常需求之一。无论是出于制作背景音乐、保存讲座内容,还是编辑播客素材,提取视频中的音频并将其保存为单独文件都显得尤为重要。视频里的音频怎么提取出来成单独文件?本文将详细介绍几种…

基于Canny边缘检测和轮廓检测

这段代码实现了基于Canny边缘检测和轮廓检测,从图像中筛选出面积较大的矩形,并使用OpenCV和Matplotlib显示结果。主要流程如下: 步骤详解: 读取图像: img cv2.imread(U:/1.png)使用cv2.imread()加载图像。 转换为灰…

cisco防火墙在内网通过外网域名进行访问的配置

1.配置主机的access-list列表 access-list outside_acl extended permit tcp any 192.168.1.123 2.对主机和端口进行映射, 2.1 nat (inside,outside) source static 192.168.1.123 interface service stcp80 stcp8800 注释:先对主机进行外网映射…

React(一)

文章目录 项目地址一、创建第一个react项目二、JSX语法2.1 生成列表2.2 大括号识别JS的表达式2.3 列表循环array2.4 条件判断以及假值显示2.5 复杂条件渲染2.6 事件监听和绑定2.7 使用Fregments返回多个根标签2.8 多条件渲染2.9 导出子组件 三、组件3.1 设置组件3.2 props给子组…

记录一下在原有的接口中增加文件上传☞@RequestPart

首先,咱声明一下: RequestBody和 MultipartFile 不可以 同时使用!!! 因为这两者预期的请求内容类型不同。RequestBody 预期请求的 Content-Type 是 application/json 或 application/xml,而 MultipartFile …

HTTPSOK ---助力阿里云免费 SSL 证书自动续期

目前许多用户面临着 SSL 证书过期续期的难题,尤其是对于阿里云的 免费 SSL 证书,每三个月需要手动申请和更新。为了帮助用户更轻松地管理 SSL 证书,现推出了强大的 HTTPSOK 服务,为用户提供了更便捷的自动续期和管理解决方案。 什…

5G的SUCI、SUPI、5G-GUTI使用场景及关系

使用场景(来源于对23.501、23.502、33.501、23.003的理解) 1、UE初始注册时,根据HN Public Key把SUPI加密成SUCI,并发送初始注册请求 2、AMF转发SUCI给AUSF和UDM进行认证,并获取解密后的SUPI 3、AMF根据SUPI生成一个5G-GUTI,并保…

【微服务】Spring AI 使用详解

目录 一、前言 二、Spring AI 概述 2.1 什么是Spring AI 2.2 Spring AI 特点 2.3 Spring AI 带来的便利 2.4 Spring AI 应用领域 2.4.1 聊天模型 2.4.2 文本到图像模型 2.4.3 音频转文本 2.4.4 嵌入大模型使用 2.4.5 矢量数据库支持 2.4.6 数据工程ETL框架 三、Sp…

【jvm】方法区的理解

目录 1. 说明2. 方法区的演进3. 内部结构4. 作用5.内存管理 1. 说明 1.方法区用于存储已被虚拟机加载的类信息、常量、静态变量、即时编译器编译后的代码缓存等数据。它是各个线程共享的内存区域。2.尽管《Java虚拟机规范》中把方法区描述为堆的一个逻辑部分,但它却…

大数据-226 离线数仓 - Flume 优化配置 自定义拦截器 拦截原理 拦截器实现 Java

点一下关注吧!!!非常感谢!!持续更新!!! Java篇开始了! 目前开始更新 MyBatis,一起深入浅出! 目前已经更新到了: Hadoop&#xff0…

编译OpenCV的速度,家里和公司的电脑相差很大

这一段时间,研究OpenCV带ffmpeg的编译问题。然后发现,同样是虚拟机,编译速度,家里的电脑明显比公司慢多了。 都是在SSD上。虚拟机内存,家里是16G,公司是8G。CPU,家里是E5 2667,公司…

Qt 的 QThread:多线程编程的基础

Qt 的 QThread:多线程编程的基础 在现代应用程序中,尤其是需要处理大量数据、进行长时间计算或者进行 I/O 操作时,多线程编程变得至关重要。Qt 提供了一个功能强大且易于使用的线程类 QThread,可以帮助开发者在 Qt 应用程序中实现…

Java 线程池介绍与实践

文章目录 引言概念优势Java 中的线程池实现线程池的核心参数1. corePoolSize:核心线程数2. maximumPoolSize:最大线程数3. keepAliveTime:线程空闲时间4. unit:时间单位5. workQueue:任务队列6. threadFactory&#xf…

富格林:安全指正规防欺诈套路

富格林指出,在现货黄金投资操作中,有众多的投资技巧和投资方式,但其实并不是所有的都适用。投资者应该注意选择安全、可信的投资方式去规防欺诈套路。值得提醒的是,现货黄金虽然拥有很多获利的机会,但也有不少欺诈套路…

PyAEDT:Ansys Electronics Desktop API 简介

在本文中,我将向您介绍 PyAEDT,这是一个 Python 库,旨在增强您对 Ansys Electronics Desktop 或 AEDT 的体验。PyAEDT 通过直接与 AEDT API 交互来简化脚本编写,从而允许在 Ansys 的电磁、热和机械求解器套件之间无缝集成。通过利…

SpringBoot(二十六)SpringBoot自定义注解

注解在springboot日常开发中使用的频率是很高的,官方为我们提供了很多注解,比如:@Autowired、@GetMapping等…… 但是我们有些特定的需求官方提供的注解是没有的。我们可以自定义注解。 下面我们来了解一下自定义注解的过程。 一:元注解 Java为我们提供了几个元注解来自定…