当前位置： 首页 > news >正文

了解防抖和节流：提升前端交互体验的实用策略

news 2025/11/11 23:28:51

了解防抖和节流：提升前端交互体验的实用策略

  • 前言
  • 什么是防抖？
  • 什么是节流？
  • 应用实例
    • 防抖实例
    • 节流实例

前言

本文将重点介绍前端性能优化方法之一的防抖和节流。首先解释了它们的概念和原理，然后探讨了它们在前端开发中的应用场景，如输入框搜索、滚动事件等。最后，通过简单的代码示例展示了如何实现防抖和节流函数。通过学习和应用这两种技术，我们可以有效地减少不必要的函数执行次数，提高页面响应速度，从而改善用户体验。

什么是防抖？

定义：延迟一段时间再触发，如果再延迟时间内又触发，则清除上一个定时，再开始新的定时。
应用场景：搜索框联想、屏幕伸缩。

什么是节流？

定义：在一段时间间隔内，稀释事件的触发频率，不论事件被触发几次，只执行一次。
应用场景：
单位时间内，鼠标不论点击多少次，只执行一次（搜索内容未变化时）。
在使用列表下拉滚动加载时，用于定时监听滚动事件。

应用实例

防抖实例

下面是用防抖实现一个简易版搜索框联想+防抖

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body><header><h1>防抖解决搜索联想词</h1></header><main><input type="text" id="search-input" placeholder="Search..."><ul id="suggestions-list"></ul></main><script>// 1.防抖函数function debounce(func, delay) {let timer;return function (...args) {clearTimeout(timer);timer = setTimeout(() => {func.apply(this, args);}, delay);};}// 2.定义两个变量分别存储输入框id和联想词idconst searchInput = document.getElementById('search-input');const suggestionsList = document.getElementById('suggestions-list');// 3.模拟异步请求获取联想词function fetchSuggestions(keyword) {const suggestions = ['apple', 'banana', 'cherry', 'date', 'elderberry', 'fig'];renderSuggestions(suggestions.filter(suggestion =>suggestion.toLowerCase().startsWith(keyword.toLowerCase())));}// 4.联想词显示函数function renderSuggestions(suggestions) {suggestionsList.innerHTML = '';suggestions.forEach((suggestion) => {const listItem = document.createElement('li');listItem.textContent = suggestion;suggestionsList.appendChild(listItem);});}// 定义默认方法，调用闭包方法，设置定时时间和防抖结束后调用的函数const debounceFetchSuggestions = debounce(fetchSuggestions, 1000);// 给输入框id增加监听器searchInput.addEventListener('input', function () {// 获取去空格value值const keyword = searchInput.value.trim();// 调用闭包方法debounceFetchSuggestions(keyword);});</script>
</body>
</html>

讲解代码
1.在html代码中写input、ul，一个用来输入，一个用来返回联想词，并给它们设置id值用于添加监听以及更新内容。
2.定义防抖函数：debounce
外层两个参数分别存储防抖事件处理方法以及延迟毫秒数。
timer用于存储定时器的引用。内部返回的闭包函数如果在延迟时间内再次被调用，则timer重置，且重新开始计时。
如果延迟时间内没有再次被调用，则调用func也就是fetchSuggestions函数，这里用到了一个方法apply，该方法有两个参数，第一个参数决定this指向的是哪个上下文环境，这里指向的是当前上下文环境，第二个为普通参数。
3.定义两个变量searchInput、suggestionsList分别把input和ul的id进行赋值。
4.模仿异步接口写方法，该方法第一层是定义了所有联想词，第二层是调用联想词显示函数。这里用到filter过滤和筛选，这里就不赘述了。
5.联想词显示函数，这里用到的是forEach遍历，createElement创建HTML元素，以及用li和appendchild加元素。
6.定义默认方法，并且设置事件处理方法和延迟毫秒数。
7.给输入框加监听器监听器中使用trim去除空格，且调用闭包函数。

节流实例

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body><header><h1>节流解决搜索联想词</h1></header><main><input type="text" id="searchInput"></main><script>const searchInput = document.getElementById('searchInput');function search(query) {// 模拟搜索操作，这里可以替换为实际的搜索逻辑console.log(`搜索: ${query}`);}// 使用节流函数处理搜索输入const throttleSearch = throttle(search, 1000); // 设定延迟为500毫秒searchInput.addEventListener('keyup', function(event) {const query = event.target.value.trim();throttleSearch(query);});// 节流函数实现function throttle(func, delay) {let timerId;let lastExecuted = 0;return function(...args) {const now = Date.now();const timeSinceLastExecution = now - lastExecuted;if (timeSinceLastExecution >= delay) {func.apply(this, args);lastExecuted = now;} else {clearTimeout(timerId);timerId = setTimeout(() => {func.apply(this, args);lastExecuted = Date.now();}, delay - timeSinceLastExecution);}};}</script>
</body>
</html>

我们首先获取了搜索框的元素，并定义了一个 search 函数用于模拟搜索操作。然后，我们使用节流函数 throttle 对搜索函数进行包装，设定了一个1000毫秒的延迟。
接下来，监听搜索框的 keyup 事件，并获取用户输入的查询词。每次键盘释放时，会调用节流函数 throttleSearch，并将查询词作为参数传递给搜索函数 search。
在节流函数的实现中，记录了最后一次函数执行的时间戳，并根据设定的延迟来判断是否立即执行函数或设置定时器延迟执行函数。
当用户在搜索框中输入内容时，搜索请求会在一定的时间间隔内被触发，避免了频繁的搜索请求。

相关文章：

了解防抖和节流：提升前端交互体验的实用策略

了解防抖和节流&#xff1a;提升前端交互体验的实用策略 前言什么是防抖&#xff1f;什么是节流&#xff1f;应用实例防抖实例节流实例 前言 本文将重点介绍前端性能优化方法之一的防抖和节流。首先解释了它们的概念和原理&#xff0c;然后探讨了它们在前端开发中的应用场景&a…...

编程日记 2023/11/14 8:47:38

SQL学习之增删改查

文章目录 数据库数据类型建表create table插入数据insert into查询数据select from修改数据update set删除数据delete from备份ctas结果插入iis截断表 truncate table修改表结构alter table添加注释 注&#xff1a;本文的SQL语法是基于Oracle数据库操作的&#xff0c;但是基本的…...

编程日记 2023/11/14 8:46:38

Ansible角色定制实例

目录 角色定制&#xff1a;roles 角色定制实例&#xff1a;利用角色部署wordpress 1.在roles目录下生成对应的目录结构 2.定义配置文件 ①nginx ②php ③mysql ④定义剧本文件 ⑤启动服务 角色定制&#xff1a;roles 对于普通的剧本&#xff08;playbook&#xff09;有…...

编程日记 2023/11/14 8:45:37

ElastaticSearch--- es多字段聚合

在使用es时&#xff0c;我们经常会用到聚合查询。 简单的聚合查询&#xff0c;已经在前面介绍过&#xff0c;详情见&#xff1a; https://www.cnblogs.com/expiator/p/13843969.html 有时&#xff0c;也会用到多字段聚合查询。类似于Mysql的Group By多个字段。 比如&#xf…...

编程日记 2023/11/14 8:44:36

本周Github有趣开源项目：Rspress等6个

Github有趣的项目、工具和库&#xff1a; 1、sshx 一个基于 Web 的安全协作终端。通过网络进行快速、协作的实时终端共享 特征&#xff1a; 运行一个命令即可与任何人共享您的终端。 在无限画布上调整大小、移动窗口以及自由缩放和平移。 查看其他人的光标实时移动。 连接到…...

编程日记 2023/11/14 8:43:34

【华为OD题库-016】字符串摘要-Java

题目 给定一个字符串的摘要算法&#xff0c;请输出给定字符串的摘要值 1、去除字符串中非字母的符号 2、如果出现连续字符(不区分大小写)&#xff0c;则输出:该字符(小)&#xff0b;连续出现的次数 3、如果是非连续的宁符(不区分大小写)&#xff0c;则输出:该字符(小写)该字母之…...

编程日记 2023/11/14 8:42:33

生成式AI - Knowledge Graph Prompting：一种基于大模型的多文档问答方法

大型语言模型&#xff08;LLM&#xff09;已经彻底改变了自然语言处理&#xff08;NLP&#xff09;任务。它们改变了我们与文本数据交互和处理的方式。这些强大的AI模型&#xff0c;如OpenAI的GPT-4&#xff0c;改变了理解、生成人类类似文本的方式&#xff0c;导致各种行业出现…...

编程日记 2023/11/14 8:41:32

深度学习AIR-PolSAR-Seg图像数据预处理

文章目录 深度学习sar图像数据预处理一.图片预处理操作1.log(1x)处理2.sqrt平方化处理 二.原网络训练效果展示原始数据训练效果展示&#xff1a; 三.对比实验1.采用原始数据2.采用取log(1x)后的数据3.采用取平方后归一化处理&#xff1a; 四.总结&#xff1a;五.思考 深度学习s…...

编程日记 2023/11/14 8:40:32

求最大公约数math.gcd()

【小白从小学Python、C、Java】 【计算机等级考试500强双证书】 【Python-数据分析】 求最大公约数 math.gcd() [太阳]选择题 下列代码执行输出的结果是&#xff1f; import math print("【执行】print(math.gcd(6, 8))") print(math.gcd(6, 8)) print(&quo…...

编程日记 2023/11/14 8:39:31

数据结构之队列

目录 引言 队列的概念与结构 队列的实现 定义 初始化 销毁 入队 判断队列是否为空 出队 获取队头元素 获取队尾元素 检测队列中有效元素个数 元素访问 源代码 queue.h queue.c test.c 引言 数据结构之路经过栈后&#xff0c;就来到了与栈联系紧密的兄弟—…...

编程日记 2023/11/14 8:38:30

MySQL数据库——存储过程-循环（while、repeat、loop）

目录 while 介绍 案例 repeat 介绍 案例 loop 介绍 案例一 案例二 while 介绍 while 循环是有条件的循环控制语句。满足条件后&#xff0c;再执行循环体中的SQL语句。具体语法为&#xff1a; -- 先判定条件&#xff0c;如果条件为true&#xff0c;则执行逻辑&#…...

编程日记 2023/11/14 8:37:29

Django路由

路由系统 1.Django1中的路由1.1 普通形式1.2 分组1.2.1 无名分组1.2.2 有名分组 2. Django2版本2.1 传统的路由2.2 正则表达式路由 3. 路由分发3.1 include(一般使用此方式做路由分发)3.2 手动分发 4. name别名及使用name的反向URL生成4.1 一般情况下的别名使用及反向生成4.2 分…...

编程日记 2023/11/14 8:36:28

头歌实践平台-数据结构-二叉树及其应用

第1关&#xff1a;实现二叉树的创建 #include "binary_tree.h"BiTreeNode* CreatBiTree(char* s, int &i, int len) // 利用先序遍历创建二叉树 // 参数&#xff1a;先序遍历字符串s&#xff0c;字符串初始下标i0&#xff0c;字符串长度len。 // 返回&#xff1…...

编程日记 2023/11/14 8:35:26

2023.11.11通过html内置“required-star“添加一个红色的星号来表示必填项

2023.11.11通过html内置"required-star"添加一个红色的星号来表示必填项 在HTML中&#xff0c;可以使用标签来为元素添加说明。同时可以通过添加一个红色的星号来表示必填项。 <!DOCTYPE html> <html lang"en"> <head><meta charse…...

编程日记 2023/11/14 8:34:25

pcie【C#】

根据提供的引用内容&#xff0c;使用C#编写PCIE的Demo需要遵循以下步骤&#xff1a;1.连接好硬件后&#xff0c;烧录bit文件&#xff0c;安装PCIe内核驱动&#xff0c;然后重启计算机。2.打开VS工程&#xff0c;创建一个新的C#控制台应用程序项目。3.在项目中添加对C DLL的引用…...

编程日记 2023/11/14 8:33:23

西门子精智屏数据记录U盘插拔问题总结

西门子精智屏数据记录U盘插拔问题总结 注意： 数据记录过程中不允许带电插拔 U 盘！ 数据记录的相关功能可参考以下链接中的内容： TIA博途wincc V16 如何进行变量周期归档？...

编程日记 2023/11/14 8:32:21

（论文阅读27/100）Deep Filter Banks for Texture Recognition and Segmentation

27.文献阅读笔记 简介 题目 Deep Filter Banks for Texture Recognition and Segmentation 作者 Mircea Cimpoi, Subhransu Maji, Andrea Vedaldi, 原文链接 http://www.cv-foundation.org/openaccess/content_cvpr_2015/papers/Cimpoi_Deep_Filter_Banks_2015_CVPR_pap…...

编程日记 2023/11/14 8:31:20

ARMday06(串口)

代码&#xff1a; #include "gpio.h" #include "stm32mp1xx_gpio.h" #include "stm32mp1xx_rcc.h" #include "stm32mp1xx_uart.h" void init(); char getc(); void putc(const char data); int main() {init();//初始化putc(j);char …...

编程日记 2023/11/14 8:30:19

Rust字符串详解

文章目录 字符串切片String迭代方法基础字符串方法容量操作增删改查 字符串切片 我们所熟知的由双引号括起来的字符串&#xff0c;在Rust中只是个字符串切片&#xff0c;又叫字符串字面值。这种类型一旦创建&#xff0c;则不可更改。但支持索引&#xff0c;从切片中索引出来的…...

编程日记 2023/11/14 8:29:17

（四）七种元启发算法（DBO、LO、SWO、COA、LSO、KOA、GRO）求解无人机路径规划MATLAB

一、七种算法&#xff08;DBO、LO、SWO、COA、LSO、KOA、GRO&#xff09;简介 1、蜣螂优化算法DBO 蜣螂优化算法&#xff08;Dung beetle optimizer&#xff0c;DBO&#xff09;由Jiankai Xue和Bo Shen于2022年提出&#xff0c;该算法主要受蜣螂的滚球、跳舞、觅食、偷窃和繁殖…...

编程日记 2023/11/14 8:28:17

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2025/11/11 7:59:27

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2025/11/10 21:49:28

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2025/8/4 18:55:37

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/11/7 20:25:41

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2025/11/8 23:20:55

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2025/11/9 21:18:45

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/9/17 21:39:04

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/11/9 2:26:31