防抖与节流详细讲解

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

相关文章

SpringBoot改造MCP服务器的详细说明(StreamableHTTP 类型)

《SpringBoot改造MCP服务器的详细说明(StreamableHTTP类型)》本文介绍了SpringBoot如何实现MCPStreamableHTTP服务器,并且使用CherryStudio... 目录SpringBoot改造MCP服务器(StreamableHTTP)1 项目说明2 使用说明2.1

从入门到进阶讲解Python自动化Playwright实战指南

《从入门到进阶讲解Python自动化Playwright实战指南》Playwright是针对Python语言的纯自动化工具,它可以通过单个API自动执行Chromium,Firefox和WebKit... 目录Playwright 简介核心优势安装步骤观点与案例结合Playwright 核心功能从零开始学习

MySQL进行数据库审计的详细步骤和示例代码

《MySQL进行数据库审计的详细步骤和示例代码》数据库审计通过触发器、内置功能及第三方工具记录和监控数据库活动,确保安全、完整与合规,Java代码实现自动化日志记录,整合分析系统提升监控效率,本文给大... 目录一、数据库审计的基本概念二、使用触发器进行数据库审计1. 创建审计表2. 创建触发器三、Java

Windows环境下解决Matplotlib中文字体显示问题的详细教程

《Windows环境下解决Matplotlib中文字体显示问题的详细教程》本文详细介绍了在Windows下解决Matplotlib中文显示问题的方法,包括安装字体、更新缓存、配置文件设置及编码調整,并... 目录引言问题分析解决方案详解1. 检查系统已安装字体2. 手动添加中文字体(以SimHei为例)步骤

nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析(结合应用场景)

《nginx-t、nginx-sstop和nginx-sreload命令的详细解析(结合应用场景)》本文解析Nginx的-t、-sstop、-sreload命令,分别用于配置语法检... 以下是关于 nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析,结合实际应

Spring boot整合dubbo+zookeeper的详细过程

《Springboot整合dubbo+zookeeper的详细过程》本文讲解SpringBoot整合Dubbo与Zookeeper实现API、Provider、Consumer模式,包含依赖配置、... 目录Spring boot整合dubbo+zookeeper1.创建父工程2.父工程引入依赖3.创建ap

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控

创建Java keystore文件的完整指南及详细步骤

《创建Javakeystore文件的完整指南及详细步骤》本文详解Java中keystore的创建与配置,涵盖私钥管理、自签名与CA证书生成、SSL/TLS应用,强调安全存储及验证机制,确保通信加密和... 目录1. 秘密键(私钥)的理解与管理私钥的定义与重要性私钥的管理策略私钥的生成与存储2. 证书的创建与

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

Python设置Cookie永不超时的详细指南

《Python设置Cookie永不超时的详细指南》Cookie是一种存储在用户浏览器中的小型数据片段,用于记录用户的登录状态、偏好设置等信息,下面小编就来和大家详细讲讲Python如何设置Cookie... 目录一、Cookie的作用与重要性二、Cookie过期的原因三、实现Cookie永不超时的方法(一)