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

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

news 2026/2/10 19:51:54

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

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

前言

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

什么是防抖？

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

什么是节流？

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

应用实例

防抖实例

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

<!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

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2026/2/8 16:24:38

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2026/2/8 18:25:56

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

编程新知 2025/10/6 16:38:04

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2026/2/5 3:41:42

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2026/2/9 4:13:22

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2026/1/31 5:09:27

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2026/2/9 17:11:06

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2026/2/6 15:01:23

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

编程新知 2026/2/6 2:13:58

Bean 作用域有哪些？如何答出技术深度？

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

编程新知 2025/11/12 21:44:33