谈谈前端开发中的防抖和节流

本文作者为 360 奇舞团前端开发工程师 李武阳

概述

防抖节流是前端开发中常用的函数优化手段,它们可以限制函数的执行频率,提升性能和用户体验。主要用于处理高频触发的事件,例如:用户的滚动、输入、点击和表单的重复提交等。

防抖与节流的区别

先简单描述下它们的作用

防抖:如果一个函数持续地、频繁地触发,那么只在它结束后过一段时间才开始执行。换句话说,如果你持续触发事件,那么防抖函数将不会执行,只有当你停止触发事件后,它才会在指定的延迟时间后执行。这对于防止例如用户在输入框中连续输入时发送过多的Ajax请求等情况非常有用。

节流:如果你持续触发事件,每隔一段时间,事件处理函数只执行一次。这有助于限制一些处理函数的执行频率,例如:滚动事件、窗口大小调整事件等。

简而言之,防抖是在事件停止触发后延迟执行函数,而节流是按照固定的时间间隔执行函数。

因为防抖节流的作用和应用场景基本相同,也就导致它们容易被混淆。

防抖的实现与使用

防抖的应用场景:

  1. 输入框搜索:当用户在搜索框中输入关键字时,使用防抖可以避免频繁发送搜索请求,而是在用户停止输入一段时间后才发送请求,减轻服务器压力。

  2. 按钮点击:当用户点击按钮时,使用防抖可以避免用户多次点击造成的多次提交或重复操作。

实现防抖的基本方式是利用定时器,每次触发事件时都清除上一次的定时器,然后重新设置一个新的定时器。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><button id="btn">按钮</button><script>// 防抖函数  function debounce(func, wait) {  let timeout;  return function (...args) {  const context = this;  clearTimeout(timeout);  timeout = setTimeout(() => func.apply(context, args), wait);  };  }  // 使用防抖函数控制连续触发事件的处理函数执行频率  const debouncedHandler = debounce(() => {  console.log('Debounced event triggered');  }, 500);  document.getElementById('btn').addEventListener('click',debouncedHandler)</script>
</body></html>

节流的实现与使用

节流的应用场景:

  1. 页面滚动:当页面滚动时,使用节流可以限制滚动事件的触发频率,减少事件处理的次数,提高页面的响应性能。

  2. 按钮点击:当用户点击按钮时,使用节流可以减少事件处理的次数,避免过于频繁的操作。

实现节流的方式也是利用定时器,但与防抖不同的是,节流会保证在一个固定的时间间隔内至少执行一次事件处理函数。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><button id="btn">按钮</button><script>// 节流函数  function throttle(func, limit) {  let inThrottle;  return function (...args) {  const context = this;  if (!inThrottle) {  func.apply(context, args);  inThrottle = true;  setTimeout(() => inThrottle = false, limit);  }  };  }// 使用节流函数控制连续触发事件的处理函数执行频率  const throttledHandler = throttle(() => {  console.log('Throttled event triggered');  }, 1000);document.getElementById('btn').addEventListener('click',throttledHandler)</script>
</body></html>

总结

在实际的前端开发中,防抖和节流的使用场景非常广泛。例如:搜索框的实时搜索建议可以使用防抖来减少服务器请求;滚动加载更多数据可以使用节流来防止在短时间内发送过多的请求。通过使用这两种技术,我们可以有效地优化前端的性能,提升用户体验。

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队,代表集团参与 W3C 和 ECMA 会员(TC39)工作。奇舞团非常重视人才培养,有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择,并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

722028db47fca5751e761694ff63be9a.png

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

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

相关文章

OceanBase OBCA认证考试预约流程

【OceanBase】OBCA认证考试预约流程 - 课程体系 - 云贝教育https://www.yunbee.net/Home/News/detail/article_id/541.html 一、OBCA账号登录/注册&#xff0c;链接 https://www.oceanbase.com/ob/login/mobile?gotohttps%3A%2F%2Fwww.oceanbase.com%2Ftraining%2Fdetail%3Fle…

Windows Redis图形客户端 Another Redis Desktop Manager的简单使用教程

1、 Redis官方文档 2、 Redis国内中文版文档 3、 Redis客户端 Another Redis Desktop Manager 4、连接redis服务 我直接使用的是公司搭建好的服务。连接服务需要以下几个信息&#xff1a; HostPortPasswordSSL 5、New Key 5.1 如何创建一个Key&#xff1f; 点击New k…

从前端角度浅谈性能 | 京东物流技术团队(转载)

1 前言 自网站诞生以来&#xff0c;页面白屏时间、用户交互的响应速度等一直都是开发者关心的问题&#xff0c;这直接影响了一个网站能否为用户的浏览提供舒适的服务&#xff0c;而这种舒适度&#xff0c;直接关系着对用户的吸引力&#xff0c;毕竟谁都不能忍受一个页面长达10秒…

webassembly003 whisper.cpp的项目结构CMakeLists.txt

注&#xff1a;带星号的为非重要部分 基础配置 cmake_minimum_required (VERSION 3.5)project(whisper.cpp VERSION 1.5.0)# Add path to modules list(APPEND CMAKE_MODULE_PATH "${CMAKE_CURRENT_SOURCE_DIR}/cmake/") # 在\cmake文件夹下还有BuildTypes.cmake&a…

Uboot-5(U-Boot源码分析1-启动第一阶段)

来源&#xff1a;朱有鹏老师的嵌入式linux核心教程 1、start.S引入 1.1、u-boot.lds中找到start.S入口 (1)、在C语言中整个项目的入口就是main函数&#xff08;这是C语言规定的&#xff09;&#xff0c;所以譬如说一个有10000个.c文件的项目&#xff0c;第一个要分析的文件就…

Go 中 slice 的 In 功能实现探索

文章目录 遍历二分查找map key性能总结 之前在知乎看到一个问题&#xff1a;为什么 Golang 没有像 Python 中 in 一样的功能&#xff1f;于是&#xff0c;搜了下这个问题&#xff0c;发现还是有不少人有这样的疑问。 补充&#xff1a;本文写于 2019 年。GO 现在已经支持泛型&am…

腾讯云 腾讯云服务器 - 腾讯云 产业智变·云启未来

腾讯云服务器CVM提供安全可靠的弹性计算服务&#xff0c;腾讯云明星级云服务器&#xff0c;弹性计算实时扩展或缩减计算资源&#xff0c;支持包年包月、按量计费和竞价实例计费模式&#xff0c;CVM提供多种CPU、内存、硬盘和带宽可以灵活调整的实例规格&#xff0c;提供9个9的数…

【工作记录】基于springboot3+springsecurity6实现多种登录方式(一)

前言 springboot3已经推出有一段时间了&#xff0c;近期公司里面的小项目使用的都是springboot3版本的&#xff0c;安全框架还是以springsecurity为主&#xff0c;毕竟亲生的。 本文针对基于springboot3和springsecurity实现用户登录认证访问以及异常处理做个记录总结&#x…

Linux miniGUI移植分析

框架介绍 常用GUI程序对比 https://www.cnblogs.com/zyly/p/17378659.html MiniGUI分为底层的GAL&#xff08;图形抽象层&#xff09;和IAL&#xff08;输入抽象层&#xff09;&#xff0c;向上为基于标准POSIX接口中pthread库的Mini-Thread架构和基于Server/Client的Mini-L…

JSONObject - 用最通俗的讲解,教你玩转 JSON 数据的解析和修改

目录 一、JSONObject 1.1、为什么要使用他&#xff1f; 1.2、应用 1.2.1、依赖 1.2.2、JSON 数据示例 1.2.3、JSON 数据的构建 1.2.4、JSON 数据的解析 一、JSONObject 1.1、为什么要使用他&#xff1f; 在还没有接触过这个东西的时候&#xff0c;一直是通过 ObjectMap…

Spring 核心之 IOC 容器学习二

基于 Annotation 的 IOC 初始化 Annotation 的前世今生 从 Spring2.0 以后的版本中&#xff0c;Spring 也引入了基于注解(Annotation)方式的配置&#xff0c;注解(Annotation)是 JDK1.5 中引入的一个新特性&#xff0c;用于简化 Bean 的配置&#xff0c;可以取代 XML 配置文件…

深度学习记录--归—化输入特征

归化 归化输入(normalizing inputs),对特征值进行一定的处理&#xff0c;可以加速神经网络训练速度 步骤 零均值化 通过x值更新让均值稳定在零附近&#xff0c;即为零均值化 归化方差 适当减小变量方差 解释 归化可以让原本狭长的数据图像变得规整&#xff0c;梯度下降的…

Electron中苹果支付 Apple Pay inAppPurchase 内购支付

正在开发中&#xff0c;开发好了&#xff0c;写一个完整详细的过程&#xff0c;保证无脑集成即可 一、先创建一个App 一般情况下&#xff0c;在你看这篇文章的时候&#xff0c;说明你已经开发的app差不多了。 但是要上架app到Mac App Store&#xff0c;则要在appstoreconnect…

WPF中Image控件Source的多种指定方式

XAML中 1、直接绝对路径直接给Source 2、将图片放到项目里面&#xff0c;设置图片为资源&#xff1b;Source写法为&#xff1a; &#xff08;1&#xff09;Source"pack://application:,,,/label里面的Content;component/folder/test.png" &#xff08;2&…

HBase学习六:LSM树算法

1、简介 HBase是基于LSM树架构实现的,天生适合写多读少的应用场景。 LSM树本质上和B+树一样,是一种磁盘数据的索引结构。但和B+树不同的是,LSM树的索引对写入请求更友好。因为无论是何种写入请求,LSM树都会将写入操作处理为一次顺序写,而HDFS擅长的正是顺序写(且HDFS不…

鸿蒙应用开发横空出世:是否应该换赛道

鸿蒙应用开发横空出世:互联网寒冬的希望? 大家好,我是demo.最近相信大家最近也收到了这样的消息,网上大肆宣传明年未来的趋势是鸿蒙应用开发,这里呢我也确实被这些信息所覆盖.最近几年确实互联网行业不是很景气,许多公司大量裁员,很多人都因此丢了工作.大龄程序员一直是互联网…

5408. 保险箱

5408. 保险箱 - AcWing题库 #include <iostream> #include <string> #include <algorithm> #include <cstring> using namespace std;const int N 1e5 10; string x, y; int f[N][3], n; int main() {cin >> n >> x >> y;memset(…

Linux第31步_了解STM32MP157的TF-A

了解STM32MP157的TF-A&#xff0c;为后期移植服务。 一、指令集 ARMV8提供了两种指令集:AAarch64和AArch32&#xff0c;根据字面意思就是64位和32位。 ARMV7提供的指令集是AArch32。 二、TF-A 指令集是AArch64的芯片&#xff0c;TF-A有&#xff1a;bl1、bl2、bl31、bl32 和…

drive souls to hell

​ a man forgot to put his phone on silent (/ˈsaɪlənt/), and it rang so loud in the church during preaching, the pastor scolded him,the worshippers admonished him after the sermon for interrupting ,his wife kept to lecturing on his carelessness all the …

用Python判断节假日,以及节假日的SQL数据文件

为什么要判断节假日&#xff1f; 在我们的日常生活中&#xff0c;节假日是一个重要的组成部分。无论是个人计划还是商业活动&#xff0c;了解特定日期是否为节假日都是非常有用的。在Python中&#xff0c;我们可以使用一些内置的日期和时间模块来判断一个日期是否是法定节假日…