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

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

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

前言

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

什么是防抖?

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

什么是节流?

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

应用实例

防抖实例

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

<!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。
在节流函数的实现中,记录了最后一次函数执行的时间戳,并根据设定的延迟来判断是否立即执行函数或设置定时器延迟执行函数。
当用户在搜索框中输入内容时,搜索请求会在一定的时间间隔内被触发,避免了频繁的搜索请求。

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

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

相关文章

Spark数据倾斜优化

1 数据倾斜现象 1、现象 绝大多数task任务运行速度很快&#xff0c;但是就是有那么几个task任务运行极其缓慢&#xff0c;慢慢的可能就接着报内存溢出的问题。 2、原因 数据倾斜一般是发生在shuffle类的算子&#xff0c;比如distinct、groupByKey、reduceByKey、aggregateByKey…

链表相关部分OJ题

&#x1f493;作者简介&#x1f44f;&#xff1a;在校大二迷茫大学生 &#x1f496;个人主页&#x1f389;&#xff1a;小李很执着 &#x1f497;系列专栏&#xff1a;Leetcode经典题 每日分享&#xff1a;人总是在离开一个地方后开始原谅它❣️❣️❣️———————————…

pgsql_全文检索_使用空间换时间的方法支持中文搜索

pgsql_全文检索_使用空间换时间的方法支持中文搜索 一、环境 PostgreSQL 14.2, compiled by Visual C build 1914, 64-bit 二、引言 提到全文检索首先想到的就是ES(ElasticSearch)和Lucene&#xff0c;专业且强大。对于一些小众场景对于搜索要求不高&#xff0c;数据量也不…

10 Go的映射

概述 在上一节的内容中&#xff0c;我们介绍了Go的结构体&#xff0c;包括&#xff1a;定义结构体、声明结构体变量、使用结构体、结构体关联函数、new、组合等。在本节中&#xff0c;我们将介绍Go的映射。Go语言中的映射&#xff08;Map&#xff09;是一种无序的键值对集合&am…

【Hadoop】MapReduce详解

&#x1f984; 个人主页——&#x1f390;开着拖拉机回家_大数据运维-CSDN博客 &#x1f390;✨&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&#x1f…

nodejs+vue+python+PHP+微信小程序-安卓-房产中介管理信息系统的设计与实现-计算机毕业设计

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

华为笔记本电脑原装win10/win11系统恢复安装教程方法

华为电脑matebook 14原装Win11系统带F10智能还原 安装恢复教程&#xff1a; 1.安装方法有两种&#xff0c;一种是用PE安装&#xff0c;一种是华为工厂包安装&#xff08;安装完成自带F10智能还原&#xff09; 若没有原装系统文件&#xff0c;请在这里获取&#xff1a;https:…

EasyDarwin开源流媒体服务器

文章目录 前言一、EasyDarwin 简介二、EasyDarwin 主要功能特点三、安装部署四、推拉流测试1、进入控制页面2、推流测试3、拉流测试 前言 本文介绍一个十分实用的高性能开源 RTSP 流媒体服务器&#xff1a;EasyDarwin。 一、EasyDarwin 简介 EasyDarwin 是基于 go 语言研发&a…

海康Visionmaster-通讯管理:使用 Modbus TCP 通讯 协议与流程交互

使用 Modbus TCP 通讯协议与视觉通讯&#xff0c;当地址为 0000 的保持型寄存器(4x 寄存器)变为 1 时&#xff0c;触发视觉流程执行一次&#xff0c;同时视觉将地址为 0000 的寄存器复位&#xff08;也即写为 0&#xff09;&#xff0c;视觉流程执行完成后&#xff0c;将结果数…

向量数据库的分类概况

保存和检索矢量数据的五种方法&#xff1a; 像 Pinecone 这样的纯矢量数据库 全文搜索数据库&#xff0c;例如 ElasticSearch 矢量库&#xff0c;如 Faiss、Annoy 和 Hnswlib 支持矢量的NoSQL 数据库&#xff0c;例如 MongoDB、Cosmos DB 和 Cassandra 支持矢量的SQL 数据库&am…

Redis键(Keys)

前言 在 Redis 中&#xff0c;键&#xff08;Keys&#xff09;是非常重要的概念&#xff0c;它们代表了存储在数据库中的数据的标识符。对键的有效管理和操作是使用 Redis 数据库的关键一环&#xff0c;它直接影响到数据的存取效率、系统的稳定性和开发的便利性。 本文将深入…

如何将本地项目推送到gitee仓库

本地项目推送到gitee仓库的两种方式&#xff1a; 一、新建gitee空仓库&#xff0c;然后git clone到本地&#xff0c;然后把代码复制进去提交 1.在gitee创建一个仓库&#xff0c;然后git clone 新建的仓库地址&#xff0c;到本地&#xff1b; 2.把项目代码复制到clone下来的仓…

基于SpringBoot+Redis的前后端分离外卖项目-苍穹外卖(四)

编辑员工和分类模块功能开发 1. 编辑员工1.1 需求分析与设计1.1.1 产品原型1.1.2 接口设计 1.2 代码开发1.2.1 回显员工信息功能1.2.2 修改员工信息功能 1.3 功能测试 2. 分类模块功能开发2.1 需求分析与设计2.1.1 产品原型2.1.2 接口设计2.1.3 表设计 2.2 代码实现2.2.1 Mappe…

HarmonyOS开发(三):ArkTS基础

1、ArkTS演进 Mozilla创建了JS ---> Microsoft创建了TS ----> Huawei进一步推出ArkTS 从最初的基础逻辑交互&#xff08;JS&#xff09;,到具备类型系统的高效工程开发&#xff08;TS&#xff09;,再到融合声明式UI、多维状态管理等丰富的应用开发能力&…

OpenCV+计算摄影

图像去噪 cv.fastNlMeansDenoising()-处理单个灰度图像cv.fastNlMeansDenoisingColored()-处理彩色图像。cv.fastNlMeansDenoisingMulti()-处理在短时间内捕获的图像序列&#xff08;灰度图像&#xff09;cv.fastNlMeansDenoisingColoredMulti()-与上面相同&#xff0c;但用于…

【算法训练-链表 零】链表高频算法题看这一篇就够了

一轮的算法训练完成后&#xff0c;对相关的题目有了一个初步理解了&#xff0c;接下来进行专题训练&#xff0c;以下这些题目就是汇总的高频题目 题目题干直接给出对应博客链接&#xff0c;这里只给出简单思路、代码实现、复杂度分析 反转链表 依据难度等级分别为反转链表、…

linux rsyslog日志采集格式设定一

linux rsyslog日志采集格式设定一 1.创建日志接收模板 打开/etc/rsyslog.conf文件,在GLOBAL DIRECTIVES模块下任意位置添加以下内容 命令: vim /etc/rsyslog.conf 测试:rsyslog.conf文件结尾添加以下内容 $template ztj,"/var/log/%hostname%/%programname%.log&…

Crypto | Affine password 第二届“奇安信”杯网络安全技能竞赛

题目描述&#xff1a; 明文经过仿射函数y3x9加密之后变为JYYHWVPIDCOZ&#xff0c;请对其进行解密&#xff0c;flag的格式为flag{明文的大写形式}。 密文&#xff1a; JYYHWVPIDCOZ解题思路&#xff1a; 1、使用在线网站直接破解或手工计算破解&#xff0c;获得flag。&#xf…

使用Nginx和uwsgi在自己的服务器上部署python的flask项目

Nginx 是一个高性能的 HTTP 和反向代理服务。其特点是占有内存少&#xff0c;并发能力强&#xff0c;事实上nginx的并发能力在同类型的网页服务器中表现较好。 Nginx 专为性能优化而开发&#xff0c;性能是其最重要的考量指标&#xff0c;实现上非常注重效率&#xff0c;能经受…

React 18 + Hooks +Ts 开发中遇到的问题及解决方案!

这篇文章是用来专门记录关于React 18 Hooks Ts 开发中遇到的问题及解决方案 Q1 问题描述&#xff1a; TS7016: Could not find a declaration file for module js-export-excel. /Users/zhangliangliang/WebstormProjects/daizhang-system-front/node_modules/js-export-exc…