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

简介: 前端必备技能之----节流

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

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

节流是什么?

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

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,也就是我们限制 幻影剑舞 只能在两秒之内释放。

image.png

详细代码如下

image.png

在这一步你需要明白一点,红色框内的函数,才是我们真正希望执行的那个函数

image.png

还是那句话(这个解释在我之前的文章:高阶函数和回调函数的区别里有说明) **

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



相关文章
|
3月前
|
移动开发 前端开发 JavaScript
前端开发人员必须了解的七大技能图谱
前端开发人员必须了解的七大技能图谱
88 1
|
3天前
|
存储 前端开发 JavaScript
高级前端必备技能
【8月更文挑战第17天】高级前端必备技能
4 1
|
1月前
|
移动开发 前端开发 JavaScript
高级前端工程师必备的技能
【7月更文挑战第8天】 **高级前端工程师**精通HTML5/CSS3/JavaScript,擅长React、Vue等框架,掌握性能优化、代码质量保证,能设计可扩展架构,处理前端安全,熟悉跨平台开发,持续学习新技术并领导团队,是技术与管理的结合体。他们对提升用户体验和推动技术创新起关键作用。
142 12
|
1月前
|
缓存 开发框架 前端开发
前端性能优化【前端必备】(含懒加载,手写防抖、节流等)
前端性能优化【前端必备】(含懒加载,手写防抖、节流等)
38 4
|
3月前
|
前端开发 JavaScript UED
【专栏】前端开发中,为解决用户操作引发的性能问题,常使用debounce(防抖)和throttle(节流)技术
【4月更文挑战第29天】前端开发中,为解决用户操作引发的性能问题,常使用debounce(防抖)和throttle(节流)技术。Debounce确保在一段时间内只执行最后一次事件触发的操作,减少不必要的执行,但有滞后性,适合搜索框实时搜索。Throttle则保证一定时间间隔内函数执行一次,保持固定频率,适用于滚动事件处理和窗口大小调整。两者可借助JavaScript或第三方库实现,需根据场景和需求选择并调整。正确使用能提升应用性能和用户体验。
30 1
|
3月前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈开发者的必备技能
随着互联网技术的不断发展,全栈开发者的需求日益增长。本文将介绍如何从前端到后端,掌握全栈开发所需的关键技能,包括前端框架的选择、后端语言的学习以及数据库的应用,帮助读者构建成为全面的技术专家。
|
3月前
|
前端开发 JavaScript UED
【前端面经】快手二面:节流和防抖知道吗?
【前端面经】快手二面:节流和防抖知道吗?
26 0
|
3月前
|
前端开发 UED
【Web 前端】防抖与节流的区别
【4月更文挑战第22天】【Web 前端】防抖与节流的区别
|
11月前
|
存储 SQL 前端开发
全栈工程师必须要掌握的前端JavaScript技能
作为一名全栈工程师,在日常的工作中,可能更侧重于后端开发,如:C#,Java,SQL ,Python等,对前端的知识则不太精通。在一些比较完善的公司或者项目中,一般会搭配前端工程师,UI工程师等,来弥补后端开发的一些前端经验技能上的不足。但并非所有的项目都会有专职前端工程师,在一些小型项目或者初创公司中,职能划分并不明确,往往要一个人前后端全都会做, 所以作为一名全栈工程师或者后端工程师,掌握必备的前端知识,也是必不可少的一项技能。今天就着重讲解一下,作为一名全栈工程师,前端JavaScript方面的必须要掌握的相关知识。
84 0
|
3月前
|
前端开发 JavaScript API