防抖与节流详细讲解

2024-08-28 18:20
文章标签 讲解 详细 节流 防抖

本文主要是介绍防抖与节流详细讲解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、前言

在前端的面试中我们经常会听到面试官问到什么是防抖与节流?会需要我们详细的讲解他们各自的用法,以及不同点。

为此特地全面的讲解一下防抖与节流,在加深对二者的理解,同时方便大家参考。首先提出几个问题,希望大家带着问题来看这篇文章:

  1. 什么是防抖与节流?
  2. 他们之间有什么联系,为什么总是一起问?
  3. 他们之间的不同点是什么?
  4. 他们各自的使用场景是什么?
  5. 如何封装防抖与节流

二、防抖(debounce)

2.1 定义

防抖(debounce),在一段时间内多次执行相同函数,但只会触发最后一次函数调用。通俗一点讲就是设置一个规定时间(假设是一秒钟),在规定时间内触发事件函数都会使时间重新计时,当规定时间过了直接执行最后一次事件函数;

2.2 使用场景

  1. 按钮重复点击;
  2. 搜索条的输入搜索;
  3. 输入验证;

2.3 实现原理

  1. 利用setTimeout定义一个规定时间;
  2. 当规定时间内再次触发了时间,则清空定时器重新计时;
  3. 当规定时间结束后执行最后一次事件函数;

2.4 防抖函数封装

// 防抖函数封装
const _debounce = (fn, delay) => {// 利用闭包定义定时器id变量存储let timer = null;return () => {// 如果有值就清除定时器,重新计时if (timer) {clearTimeout(timer)}timer = setTimeout(fn, delay);}
};
// 窗口大小发生改变触发函数
const onResize = () => {console.log("界面窗口发生改变");
};
// 监听窗口大小发生变化
window.addEventListener('resize', _debounce(onResize, 500));

三、节流(throttle)

3.1 定义

节流(throttle)在一段时间内多次执行相同函数,但只会触发第一次函数调用。通俗一点讲就是设置一个规定时间(假设是一秒钟),在规定时间内触发事件函数只会执行第一次;如果在规定的时间间隔内再次触发事件,函数不会被执行,直到时间间隔结束。

3.2 使用场景

  1. 表单提交按钮避免重复点击,重复调用接口;
  2. 页面加载时的资源加载;
  3. 滚动事件;
  4. 窗口大小调整监听;
  5. 输入框的重复输入搜索;

3.3 实现原理

  1. 利用setTimeout定义一个规定时间;
  2. 在规定时间内只执行一次函数;
  3. 如果规定时间没到则不执行事件函数,反之执行;

3.4 防抖函数封装

const _throttle = (fn, delay) => {let timer = null;return () => {if (!timer) {timer = setTimeout(() => {fn();timer = null;}, delay);}}
};
// 窗口大小发生改变触发函数
const onResize = () => {console.log("界面窗口发生改变");
};
// 监听窗口大小发生变化
window.addEventListener('resize', _throttle(onResize, 500));

四、防抖与节流的区别

4.1 相同点

  1. 都是用来实现前端性能优化的不同方式;
  2. 主要用于控制事件函数的执行频率;

4.2 不同点

  1. 防抖是在规定时间内执行最后一次函数
  2. 节流是在规定时间内执行第一次函数
  3. 节流会在规定时间内一次又一次的执行,可以想象雨滴匀速下落;
  4. 防抖是在规定时间内重复触发都会重新计时,类比输入框不停的打字当停下后再去调用搜索;

五、总结

防抖(Debounce)和节流(Throttle)是都是常用的前端优化技术,用于控制函数的执行频率,但它们的实现原理和应用场景有所不同。

需要理解他们各自的实现原理,从而在日常开发中使用到对应场景中。

这篇关于防抖与节流详细讲解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1115532

相关文章

最新版IDEA配置 Tomcat的详细过程

《最新版IDEA配置Tomcat的详细过程》本文介绍如何在IDEA中配置Tomcat服务器,并创建Web项目,首先检查Tomcat是否安装完成,然后在IDEA中创建Web项目并添加Web结构,接着,... 目录配置tomcat第一步,先给项目添加Web结构查看端口号配置tomcat    先检查自己的to

使用Nginx来共享文件的详细教程

《使用Nginx来共享文件的详细教程》有时我们想共享电脑上的某些文件,一个比较方便的做法是,开一个HTTP服务,指向文件所在的目录,这次我们用nginx来实现这个需求,本文将通过代码示例一步步教你使用... 在本教程中,我们将向您展示如何使用开源 Web 服务器 Nginx 设置文件共享服务器步骤 0 —

SpringBoot集成SOL链的详细过程

《SpringBoot集成SOL链的详细过程》Solanaj是一个用于与Solana区块链交互的Java库,它为Java开发者提供了一套功能丰富的API,使得在Java环境中可以轻松构建与Solana... 目录一、什么是solanaj?二、Pom依赖三、主要类3.1 RpcClient3.2 Public

手把手教你idea中创建一个javaweb(webapp)项目详细图文教程

《手把手教你idea中创建一个javaweb(webapp)项目详细图文教程》:本文主要介绍如何使用IntelliJIDEA创建一个Maven项目,并配置Tomcat服务器进行运行,过程包括创建... 1.启动idea2.创建项目模板点击项目-新建项目-选择maven,显示如下页面输入项目名称,选择

Python基于火山引擎豆包大模型搭建QQ机器人详细教程(2024年最新)

《Python基于火山引擎豆包大模型搭建QQ机器人详细教程(2024年最新)》:本文主要介绍Python基于火山引擎豆包大模型搭建QQ机器人详细的相关资料,包括开通模型、配置APIKEY鉴权和SD... 目录豆包大模型概述开通模型付费安装 SDK 环境配置 API KEY 鉴权Ark 模型接口Prompt

在 VSCode 中配置 C++ 开发环境的详细教程

《在VSCode中配置C++开发环境的详细教程》本文详细介绍了如何在VisualStudioCode(VSCode)中配置C++开发环境,包括安装必要的工具、配置编译器、设置调试环境等步骤,通... 目录如何在 VSCode 中配置 C++ 开发环境:详细教程1. 什么是 VSCode?2. 安装 VSCo

Spring Boot 中整合 MyBatis-Plus详细步骤(最新推荐)

《SpringBoot中整合MyBatis-Plus详细步骤(最新推荐)》本文详细介绍了如何在SpringBoot项目中整合MyBatis-Plus,包括整合步骤、基本CRUD操作、分页查询、批... 目录一、整合步骤1. 创建 Spring Boot 项目2. 配置项目依赖3. 配置数据源4. 创建实体类

python与QT联合的详细步骤记录

《python与QT联合的详细步骤记录》:本文主要介绍python与QT联合的详细步骤,文章还展示了如何在Python中调用QT的.ui文件来实现GUI界面,并介绍了多窗口的应用,文中通过代码介绍... 目录一、文章简介二、安装pyqt5三、GUI页面设计四、python的使用python文件创建pytho

SpringBoot整合InfluxDB的详细过程

《SpringBoot整合InfluxDB的详细过程》InfluxDB是一个开源的时间序列数据库,由Go语言编写,适用于存储和查询按时间顺序产生的数据,它具有高效的数据存储和查询机制,支持高并发写入和... 目录一、简单介绍InfluxDB是什么?1、主要特点2、应用场景二、使用步骤1、集成原生的Influ

SpringBoot实现websocket服务端及客户端的详细过程

《SpringBoot实现websocket服务端及客户端的详细过程》文章介绍了WebSocket通信过程、服务端和客户端的实现,以及可能遇到的问题及解决方案,感兴趣的朋友一起看看吧... 目录一、WebSocket通信过程二、服务端实现1.pom文件添加依赖2.启用Springboot对WebSocket