节流防抖:提升前端性能的秘密武器(上)

在这里插入图片描述

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

  • 一、引言
    • 介绍节流防抖的概念和重要性
    • 为什么需要节流防抖
  • 二、节流防抖的原理
    • 解释节流和防抖的基本原理
    • 二者的实现方式和应用场景
  • 三、使用 JavaScript 实现节流防抖
    • 简单的示例代码

一、引言

介绍节流防抖的概念和重要性

节流防抖是在 JavaScript 中常见的两种技术,用于限制某个函数在短时间内被频繁调用。

节流 是指在一定时间内,限制函数的调用次数,即如果函数在指定的时间内被调用,只有第一次调用会被执行,直到下一个指定的时间间隔才会再次执行。

防抖 是指在一定时间内,延迟函数的执行,即如果函数在指定的时间内被频繁调用,只会执行最后一次调用,之前的调用都会被取消。

这两种技术的重要性在于它们可以提高应用程序的性能和用户体验。例如,在搜索框输入时,如果每次输入一个字符就发送一个请求到服务器,可能会导致大量不必要的请求,从而降低应用程序的性能。使用节流或防抖技术可以限制请求的频率,减少服务器的负载,并提高用户体验。

另外,节流和防抖技术还可以用于其他场景,例如按钮提交、滚动事件处理等,以避免不必要的操作和提高应用程序的响应能力。

为什么需要节流防抖

需要使用节流防抖的原因有以下几点:

  1. 性能优化:在一些场景中,频繁地执行某个函数可能会导致性能问题,例如在浏览器中进行 DOM 操作或发送网络请求。通过使用节流或防抖,可以限制函数的执行频率,减少不必要的计算和资源消耗,从而提高应用程序的性能

  2. 减少冗余操作:有时候,用户可能会在短时间内快速触发同一个事件多次,而实际上只需要最后一次触发的操作被执行。例如,在搜索框中输入文字时,用户可能会连续输入多个字符,但只需要最后输入的内容进行搜索。通过使用节流或防抖,可以避免执行之前的冗余操作,只执行最后一次触发的操作。

  3. 提升用户体验:在某些情况下,频繁的操作可能会给用户带来不好的体验,例如在输入框中输入文字时,如果每次输入一个字符就发送一个请求到服务器,可能会导致页面卡顿或响应延迟。通过使用节流或防抖,可以减少这种不必要的操作,提高用户输入的流畅度和响应速度。

综上所述,节流防抖是一种用于优化性能、减少冗余操作和提升用户体验的技术手段,在需要限制某个函数的执行频率或避免短时间内多次触发同一个事件的场景中非常有用。

二、节流防抖的原理

解释节流和防抖的基本原理

节流 的基本原理是在指定的时间间隔内,只允许函数被调用一次。如果函数在该时间间隔内被再次调用,那么只有第一次调用会被执行,其他调用都会被忽略。直到时间间隔过去后,才会执行下一次调用。

以下是一个简单的节流示例代码:

function throttle(func, delay) {// 使用 flag 来记录上次执行时间let flag = true; return function() {if (flag) {flag = false;setTimeout(() => {func.apply(this, arguments);flag = true;}, delay);}};
}

在上述代码中,throttle 函数接受一个要限制频率的函数 func 和一个时间间隔 delay。它返回一个新的函数,该函数会在每次调用时检查 flag 的状态。如果 flagtrue,表示上次调用还在时间间隔内,那么本次调用将被忽略。如果 flagfalse,表示上次调用已经过去了时间间隔,那么会执行 func 函数,并将 flag 设为 true。然后,使用 setTimeout 延迟一段时间后再次将 flag 设为 false,以便下一次调用可以执行。

防抖 的基本原理是将多个连续的函数调用合并为一个,只在最后一次调用后执行函数。如果在指定的时间间隔内再次触发事件,之前的延迟操作会被取消,重新开始计时。

以下是一个简单的防抖示例代码:

function debounce(func, delay) {let debounceTimer; return function() {// 清除之前设置的定时器clearTimeout(debounceTimer);debounceTimer = setTimeout(() => {func.apply(this, arguments);}, delay);};
}

在上述代码中,debounce 函数接受一个要限制频率的函数 func 和一个时间间隔 delay。它返回一个新的函数,该函数会在每次调用时清除之前设置的定时器,并重新设置一个定时器。只有在定时器到期后,才会执行 func 函数。

通过使用节流和防抖,可以有效地限制某个函数在短时间内被频繁调用,从而提高应用程序的性能和用户体验。

二者的实现方式和应用场景

以下是二者实现方式和应用场景的详细解释:

  1. 节流
  • 实现方式:节流通过控制函数在指定的时间间隔内只执行一次来实现。当函数被调用时,它会检查上一次执行的时间,如果距离上次执行时间小于时间间隔,就会忽略本次调用。否则,它会执行函数,并重新开始计时。

  • 应用场景:节流适用于需要限制某个操作执行频率的场景。例如,在搜索框输入时,每次按键都会发送一个请求到服务器进行搜索。使用节流可以将请求合并为每隔一段时间发送一次,避免频繁请求导致的性能问题。

  1. 防抖
  • 实现方式:防抖通过延迟函数的执行来实现。当函数被调用时,它会启动一个定时器。如果在定时器到期前函数再次被调用,它会重置定时器并重新开始计时。只有当定时器到期且期间没有再次调用函数时,才会执行函数。

  • 应用场景:防抖适用于需要在用户操作结束后执行某个操作的场景。例如,在提交表单时,用户可能会连续点击提交按钮多次,但只希望最后一次点击提交数据。使用防抖可以确保只有最后一次点击会触发提交操作。

总的来说,节流和防抖都是用于优化性能和用户体验的技术。它们的主要区别在于节流是限制函数的执行频率,而防抖是延迟函数的执行直到用户停止操作。选择使用哪种技术取决于具体的需求和场景。

三、使用 JavaScript 实现节流防抖

简单的示例代码

以下是使用 JavaScript 实现节流防抖的简单示例代码:

  1. 节流
// 创建一个节流函数
function throttle(func, delay) {// 使用 flag 来记录上次执行时间let flag = true; return function() {if (flag) {flag = false;// 使用 setTimeout 延迟执行setTimeout(() => {func.apply(this, arguments);flag = true;}, delay);}}
}// 创建一个测试函数
const exampleFunction = () => {console.log('函数执行!');
}// 使用节流函数包装测试函数
const throttledFunction = throttle(exampleFunction, 1000);// 调用节流后的函数
throttledFunction();
throttledFunction();
throttledFunction();

在上述示例中,throttle 函数接受一个要限制频率的函数 func 和一个时间间隔 delay。它返回一个新的函数,该函数会在每次调用时检查 flag 的状态。如果 flagtrue,表示上次调用还在时间间隔内,那么本次调用将被忽略。如果 flagfalse,表示上次调用已经过去了时间间隔,那么会执行 func 函数,并将 flag 设为 true。然后,使用 setTimeout 延迟一段时间后再次将 flag 设为 false,以便下一次调用可以执行。

  1. 防抖
// 创建一个防抖函数
function debounce(func, delay) {let debounceTimer; return function() {const context = this;const args = arguments; // 清除之前设置的定时器clearTimeout(debounceTimer);debounceTimer = setTimeout(() => {func.apply(context, args);}, delay);}
}// 创建一个测试函数
const exampleFunction = () => {console.log('函数执行!');
}// 使用防抖函数包装测试函数
const debouncedFunction = debounce(exampleFunction, 1000);// 调用防抖后的函数
debouncedFunction();
debouncedFunction();
debouncedFunction();

在上述示例中,debounce 函数接受一个要限制频率的函数 func 和一个时间间隔 delay。它返回一个新的函数,该函数会在每次调用时清除之前设置的定时器,并重新设置一个定时器。只有在定时器到期后,才会执行 func 函数。

通过使用节流和防抖,可以有效地限制某个函数在短时间内被频繁调用,从而提高应用程序的性能和用户体验。

请注意,这只是一个简单的示例,实际应用中可能需要根据具体情况进行一些调整和优化。

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

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

相关文章

vue3使用mars3d实现地图轮播高亮,且每个区域颜色不一样

效果图(珙县就是轮播高亮的效果) 思路:初始化一张完整的地图,然后定时器去挨个生成每个县上的地图,并且覆盖在原来的位置,每到一定的时间,就清除之前生成高亮图并且生成下一张高亮图 如何引入地图 上篇文章已详细发过 略 父组…

【JavaWeb学习笔记】7 - Servlet入门开发

零、在线文档 Servlet 3.1 API Documentation - Apache Tomcat 8.0.53 一、Servlet基本介绍 1.为什么出现Servlet 提出需求:请用你现有的html css javascript,开发网站,比如可以让用户留言/购物/支付,你能搞定吗? 不能 这几个不能直接操作数据库 …

Java 语言关键字

Java关键字是电脑语言里事先定义的,有特别意义的标识符,有时又叫保留字,还有特别意义的变量。Java的关键字对Java的编译器有特殊的意义,他们用来表示一种数据类型,或者表示程序的结构等,关键字不能用作变量…

20231213给Ubuntu18.04.6LTS新加一块HDD机械硬盘

20231213给Ubuntu18.04.6LTS新加一块HDD机械硬盘 2023/12/13 22:50 rootrootrootroot-X99-Turbo:~$ cat /etc/issue Ubuntu 18.04.6 LTS \n \l sudo fdisk -l rootrootrootroot-X99-Turbo:~$ rootrootrootroot-X99-Turbo:~$ sudo fdisk -lu Disk /dev/sda: 2.7 TiB, 300059298…

【源码解析】flink sql执行源码概述:flink sql执行过程中有哪些阶段,这些阶段的源码大概位置在哪里

文章目录 一. sql执行流程源码分析1. Sql语句解析成语法树阶段(SQL - > SqlNode)2. SqlNode 验证(SqlNode – >Operation)3. 语义分析(Operation - > RelNode)4. 优化阶段(RelNode - &…

LangChain 25: SQL Agent通过自然语言查询数据库sqlite

LangChain系列文章 LangChain 实现给动物取名字,LangChain 2模块化prompt template并用streamlit生成网站 实现给动物取名字LangChain 3使用Agent访问Wikipedia和llm-math计算狗的平均年龄LangChain 4用向量数据库Faiss存储,读取YouTube的视频文本搜索I…

Java中的多态到底是什么?

Java中的多态到底是什么? 在Java中,多态是面向对象编程中的一个重要概念,它有助于提高代码的灵活性和可维护性。多态分为编译时多态和运行时多态。 编译时多态(静态多态): 编译时多态是指在编译阶段确定方…

2023全国大学生数据分析大赛A题完整论文教学

大家好呀,从发布赛题一直到现在,总算完成了全国大学生数据分析大赛A题某电商平台用户行为分析与挖掘完整的成品论文。 本论文可以保证原创,保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊弄人的垃圾半成品论文。 实…

透析回溯的模板

关卡名 认识回溯思想 我会了✔️ 内容 1.复习递归和N叉树,理解相关代码是如何实现的 ✔️ 2.理解回溯到底怎么回事 ✔️ 3.掌握如何使用回溯来解决二叉树的路径问题 ✔️ 回溯可以视为递归的拓展,很多思想和解法都与递归密切相关,在很多…

Windows 网络监控的内容和方式

Microsoft Windows是使用最广泛的操作系统之一,受到全球用户的青睐,Windows 设备与许多进程、服务和事件相关联,这些进程、服务和事件通常需要从单个控制台进行跟踪,这就是 Windows 网络监控工具派上用场的地方。Windows 网络监控…

项目总结-自主HTTP实现

终于是写完了,花费了2周时间,一点一点看,还没有扩展,但是基本功能是已经实现了。利用的是Tcp为网络链接,在其上面又写了http的壳。没有使用epoll,多路转接难度比较高,以后有机会再写&#xff0c…

一张图片组合一组动作就可以生成毫无违和感的视频!

你敢信,1张人物图片 1张动作动画,就可以生成一段视频。网友直呼:“主播/视频UP主可能快要下岗了!” (模型视频来源于网络) 本周,字节跳动联合新加坡国立大学发布了一款开源项目 MagicAnimate&…

(第63天)19C NONCDB 转 PDB

目前很多 19C 数据库依然是创建为 NONCDB 架构,但是未来 CDB 架构的使用是无法避免的,在 21C 版本开始 Oracle 官方将不再支持 NONCDB 架构。 环境信息 本文主要介绍以下如何在 19C 同版本下将 NONCDB 转为 CDB/PDB 架构(DBMS_PDB.DESCRIBE 方式),以下为测试环境信息: …

什么是XSS攻击?如何防止它?

跨站脚本攻击(XSS),英文全称为 Cross-Site Scripting,是一种常见的 Web 安全漏洞。XSS 攻击的目标是在用户浏览器中执行恶意脚本,从而获取用户敏感信息、劫持用户会话或者进行其他恶意操作。 XSS 攻击通常发生在由用户…

探索C++中的常见排序算法

探索C中的常见排序算法 目录 冒泡排序 (Bubble Sort)选择排序 (Selection Sort)插入排序 (Insertion Sort) 冒泡排序 (Bubble Sort) 实现思路: 冒泡排序是一种简单直观的排序算法,它通过不断交换相邻元素的位置来达到排序的目的。算法的基本思想是重…

k8s中EmptyDir、HostPath、NFS三种基本存储方式介绍

目录 一.数据存储介绍 二.EmptyDir 1.简介 2.案例演示 三.HostPath 1.简介 2.案例演示 (1)介绍一下type类型 (2)简单演示 (3)数据同步功能 四.NFS 1.简介 2.案例演示 (1&#xff…

Linux Ubuntu 手动搭建webDav

1、安装 因为需要跟 zotero 进行交互,因此需要在服务器搭建一个webDav 以下是搭建步骤: sudo apt-get update sudo apt-get install apache2 Ubuntu 安装apache2来实现 不同于Centos 安装好了之后,运行 a2enmod dav_fs a2enmod dav 激…

【视频笔记】古人智慧与修行

古人的智慧 相由心生、老子悟道、佛祖成佛 多一些思考,多一些精神修炼。 除非我们今天能够产生与人类科技发展相并行的精神变革,否则永远可能也无法跳脱出历史的轮回。 视频来源 曾仕强教授周易的智慧 太极两仪四象八卦 一生二,二生三&…

大数据机器学习深度解读决策树算法:技术全解与案例实战

大数据机器学习深度解读决策树算法:技术全解与案例实战 本文深入探讨了机器学习中的决策树算法,从基础概念到高级研究进展,再到实战案例应用,全面解析了决策树的理论及其在现实世界问题中的实际效能。通过技术细节和案例实践&…

【C++】POCO学习总结(十四):引用计数、共享指针、缓冲区管理

【C】郭老二博文之:C目录 1、Poco::AutoPtr 智能指针 1.1 说明 Poco::AutoPtr是一个含有引用计数的“智能”指针模版。 Poco::AutoPtr用于支持引用计数的类实例化。支持引用计数的类需要有以下要求: 维护一个引用计数(在创建时初始化为1)实现void du…