前端必备技能之----节流

article/2025/11/3 19:59:31

(引言----和大佬们出去吃饭总是会有收获的,这个知识点是我之前从未考虑过的事情,但是在现代的设计开发之中却是非常重要且使用频率非常之高的两个概念。)

作为一个前端的初学者,因为之前淋过雨,所以想为同样在雨天行走的人打一把伞。
首先我们看到一个问题,不能盲目的直接去搜索它的答案,尤其是前端来说,首先你得考虑为什么要用它,而它又可以用来哪些地方?不仅仅希望我们大家只是单纯的死记硬背,而是去真正的理解它。下面进入正题:


节流是什么?

你暂时不需要理解这两个词的字面意思,首先思考这样一个问题。假设有下面这样一个场景:

1.你设计了一个表单,这个表单提交的数据内容很多。

2.你的有些用户闲得很无聊,写完表单以后疯狂点击提交按钮。

3.你的后端同事走到你面前指着崩溃的服务器来向你抱怨。

这时候你会怎么做?
OK我选择当场辞职

提个醒,你打游戏你放了某个觉醒技能,那这个技能还会让你第一时间继续放吗?对没错,就和你打游戏一样,你的大招需要冷却时间才能放,如果你能一直放某些高伤害技能,那这游戏还有什么难度?过不了多久玩家就感觉无聊纷纷退游了。

所以我的第一想法肯定是给这个button一个冷却时间。
这就简单多了。下面我用伪代码来先构建出我们即将要写的真实代码的逻辑思维。

现在在我面前的有两个东西:一个按钮🔘提交的功能,一个冷却时间,假设为5秒(根据实际工作设置)。

牵扯到时间会让我第一时间想到 setTimeout和setInterval,首先排除setInterval,因为提交表单这个功能我不希望它循环执行,所以我选择setTimeout。

image.png
假设你现在正在玩游戏,游戏有一个技能,是幻影剑舞,它的技能CD是两秒,那么我们就需要判断用户是否在两秒内多处点击了这个技能,如果多次点击,那么无事发生(返回一个空函数),如果不在CD,那么返回这个技能的特效(技能执行的函数)

这里我用控制台输出作为展示,我给这个按钮点击事件返回一个consoloe.log()函数。让它在控制台上输出我是否释放了。

image.png
image.png
image.png
在这里我们需要知道cdTime这个函数只是一个外壳函数,它真正的意义在于传递我们需要的参数,它并不是我们希望onclick真正要执行的函数!(这个解释在我的文章:高阶函数和回调函数的区别里有说明,在这里不再过多解释)。

现在我们设计cdTime,也就是我们限制 幻影剑舞 只能在两秒之内释放。"不行,cd中"都是我在两秒之内按的。
image.png
详细代码如下

image.png

在这一步你需要明白一点,红色框内的函数,才是我们真正希望执行的那个函数
image.png
还是那句话(这个解释在我之前的文章:高阶函数和回调函数的区别里有说明)
**

其实节流的方法不止这一个,但是整体实现思想都是类似的,如果你弄懂了这些代码,你就掌握了节流的思路。


http://chatgpt.dhexx.cn/article/skWH7cql.shtml

相关文章

html锚点链接小案例

案例1&#xff1a;回到首页 <html ><head><meta charset"utf-8"><title></title><style type"text/css"> *{border: 0;margin: 0; padding: 0;}.box1, .box2{height: 3000px; width: 200px;background-color: green…

HTML锚点为什么叫hash,锚点链接和hash属性

相信大家挺经常见过这样一个效果。有一个很长很长的页面,分成好几部分,目录中一点击,就能定位到页面某个位置。 例如:有这样一个目录,例如你点击一下“HTML”,就会直接跳转到“HTML”的页面位置 这就是锚点链接(也叫书签链接),常常用于那些内容庞大繁琐的网页,通过点击…

html5添加锚点锭接,为页面添加锚点链接

为页面添加锚点链接 开哈础是发通待质击文以为近哈知按分过续的战发中会遇到为页面中添加锚点链接的需求,即在页面中点击某处,可以跳转到与之有联系的地方。添加锚点的方法比较多,在这儿,把常用的方法大享上。是发了概开程态间些告人屏果会区。一一是控标近体到班都一从小述…

菜鸟 html锚链接,Vue锚点链接

锚点链接是我们在开发中经常会用到的一个技术点&#xff0c;常见的常见有&#xff0c;页面内容过多&#xff0c;而我们不希望拿鼠标一直来回滚动&#xff0c;就需要用到锚点链接&#xff0c;以 " 目录 " 的方式来进行对应的跳转。 而在常见的项目中&#xff0c;锚点链…

制作图片锚点链接html,锚点链接怎么做

网页内容过多时我们可以使用锚点链接来进行位置的跳转&#xff0c;通过锚点链接我们不但可以指向文档&#xff0c;还能指向页面里的特定段落&#xff0c;这样就会便于我们来浏览网页中的内容&#xff0c;那么&#xff0c;锚点链接怎么实现呢&#xff1f;本篇文章就来给大家介绍…

web前端学习26(锚点链接)

文章目录 4.7.2 链接分类 4.7.2 链接分类 锚点链接&#xff1a;点我们点击链接&#xff0c;可以快速定位到页面中的某个位置。 在链接文本的href属性中&#xff0c;设置属性值为#名字的形式&#xff0c;如< a href"#two">第2集< /a> 点完这个链接就会跳…

Web容器版本泄露漏洞修复

0x00 背景 恶意攻击者可以根据版本信息寻找相关漏洞&#xff0c;进行利用漏洞攻击 0x01 修复思路 通过修改配置或者配置错误提示页面&#xff0c;隐藏 web容器的版本号及其它敏感信息。 0x02 代码修复 Apache 版本号 隐藏 Apache 的版本号及其它敏感信息&#xff0c;配置操…

Spring容器 SpringMVC容器 web容器的关系

说到spring和springmvc&#xff0c;其实有很多工作好多年的人也分不清他们有什么区别&#xff0c;如果你问他项目里用的什么MVC技术&#xff0c;他会说我们用的spring和mybatis&#xff0c;或者spring和hibernate。 在潜意识里会认为springmvc就是spring&#xff0c;之前我也是…

SpringBoot深入(一)--SpringBoot内置web容器及配置

版权声明&#xff1a;作者原创&#xff0c;转载请注明出处。 本系列文章目录地址&#xff1a;http://blog.csdn.net/u011961421/article/details/79416510 前言 在学会基本运用SpringBoot同时&#xff0c;想必搭过SSH、SSM等开发框架的小伙伴都有疑惑&#xff0c;SpringBoot在…

SpringBoot内置web容器及配置

前言 在学会基本运用SpringBoot同时&#xff0c;想必搭过SSH、SSM等开发框架的小伙伴都有疑惑&#xff0c;SpringBoot在spring的基础上做了些什么&#xff0c;使得使用SpringBoot搭建开发框架能如此简单&#xff0c;便捷&#xff0c;快速。本系列文章记录博主网罗博客、分析源码…

Web 容器、HTTP 服务器 、Servlet 容器区别与联系

首先浏览器发起 HTTP 请求&#xff0c;像早期的时候只会请求一些静态资源&#xff0c;这时候需要一个服务器来处理 HTTP 请求&#xff0c;并且将相应的静态资源返回。 这个服务器叫 HTTP 服务器。 简单点说就是解析请求&#xff0c;然后得知需要服务器上面哪个文件夹下哪个名字…

常见的几种web容器(Apache、Nginx、Tomcat)

目录 前言ApacheNginxTomcat ~~~~~~~~ 因为想要面对一个新的开始&#xff0c;一个人必须有梦想、有希望、有对未来的憧憬。如果没有这些&#xff0c;就不叫新的开始&#xff0c;而叫逃亡。 ​​​​ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~…

web容器、中间件以及web服务器的区别

一、web容器 1.web容器的介绍 web容器是一种服务程序&#xff0c;在服务器一个端口就有一个提供相应服务的程序&#xff0c;而这个程序就是处理从客户端发出的请求。实际上&#xff0c;Web容器是一种服务程序&#xff0c;给处于其中的应用程序组件提供环境&#xff0c;使其直接…

Web容器的作用

在eclipse中创建web项目时&#xff0c;会选择一个target runtime&#xff0c;意思就是在什么上面运行&#xff0c;也就是运行时的web容器。我们常用的Tomcat就是一种web容器。简单来说&#xff0c;web容器也就是servlet容器。主要有以下作用&#xff1a; 1.通信支持 通过web容…

docker——Ubuntu镜像操作和apache web容器操作小实训

文章目录 Ubuntu镜像操作apache web容器操作 Ubuntu镜像操作 &#xff08;1&#xff09;拉取最新的Ubuntu官方镜像。 &#xff08;2&#xff09;查看该镜像的详细信息。 &#xff08;3&#xff09;查看该镜像的构建历史。 &#xff08;4&#xff09;删除该镜像。 apache w…

经典Web容器解析漏洞

目录 Apache 文件名解析漏洞(info.php.x 绕过) IIS6.0解析漏洞 文件名解析漏洞(time.asp;1.jpg&#xff09; 目录解析漏洞(1.asp/time.jpg) PHP-CGI 解析漏洞&#xff08;IIS 7.0&#xff08;info.png/.php&#xff09;&#xff09; Nginx解析漏洞 1. 空字节漏洞&#x…

web容器解析

目录&#xff1a; 简述web服务器功能web服务器的限制辅助应用servletweb容器的作用web容器和web服务器的区别和联系 一、简述web服务器功能。 web服务器主要作用是处理客户请求&#xff0c;并作出响应。当浏览器发送一个HTTP请求到web服务器&#xff0c;web服务器解析请求&am…

web容器

目录 前言1、 Web容器简介1.1 Web容器的定义 2、 Web容器的作用2.1 概念区分2.1.1 架构 & 框架2.1.2 Web服务器&#xff08;Web Server&#xff09;2.1.3 中间件&#xff08;Middleware&#xff09; 2.2 Web容器与Spring、Web应用等的关系2.3 Web容器在web开发中的作用 3、…

Web容器(一):Web容器简介

本文参照&#xff1a;极客时间-《深入拆解 Tomcat & Jetty》-开篇词 | Java程序员如何快速成长 01_Web容器学习路径 Web容器 Web技术的发展史 早期的Web应用主要用于浏览新闻等静态页面&#xff0c;HTTP服务器&#xff08;比如Apache、Nginx&#xff09;向浏览器返回静…

MyBatis分页及分页插件使用

7.分页 7.1 作用 减少数据处理量&#xff0c;一次数据量太大了对数据库和网络压力太大 SELECT * FROM school.user LIMIT startIndex,pageSize SELECT * FROM school.user LIMIT 2 -- 0,2 SELECT * FROM school.user LIMIT 2,2 -- startIndex从0开始使用mybatis实现分页步骤…