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

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

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

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

节流是什么?

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

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

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

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



相关文章
|
6月前
|
移动开发 前端开发 JavaScript
前端开发人员必须了解的七大技能图谱
前端开发人员必须了解的七大技能图谱
118 1
|
3月前
|
前端开发 UED 开发者
颠覆你的前端知识:防抖与节流的区别及实战解析!
【8月更文挑战第23天】在Web前端开发中,处理用户界面交互产生的事件可能会影响性能。为此,我们有两种优化方法:防抖(debounce)和节流(throttle)。防抖确保函数仅在事件停止触发一段时间后执行一次,适用于如搜索自动补全场景。而节流则确保函数按固定时间间隔执行,不管用户操作频率如何。本篇技术博客将深入解析两者差异并提供示例代码,帮助开发者更好地理解和应用这些技巧以提升应用性能和用户体验。
76 0
|
22天前
|
前端开发 API 开发者
🥇前端宝藏:多项目掌握技能的冒险之旅🏆
在前端开发的学习旅程中,实践是提升技能的关键。本文介绍了多个前端项目,包括计算器、天气应用、经典游戏等,涵盖了从React到Svelte的各种技术栈。每个项目都附有在线演示和源代码,旨在帮助读者深入理解实现细节,激励更多人参与实际项目开发。通过这些项目,读者可以将理论知识转化为实践,拓展职业机会。
13 0
|
25天前
|
前端开发
前端常用方法防抖(debounce)和节流(throttle)的示例演示及应用场景说明
前端常用方法防抖(debounce)和节流(throttle)的示例演示及应用场景说明
21 0
|
2月前
|
缓存 边缘计算 前端开发
关于前端性能优化问题,认识网页加载过程和防抖节流
该文章详细探讨了前端性能优化的方法,包括理解网页加载过程、实施防抖和节流技术来提升用户体验和性能。
|
3月前
|
存储 前端开发 JavaScript
高级前端必备技能
【8月更文挑战第17天】高级前端必备技能
33 1
|
3月前
|
存储 前端开发 JavaScript
数组操作大揭秘:Web前端开发者必备技能!
【8月更文挑战第23天】本文介绍了JavaScript中数组的基本操作方法,包括创建、添加、删除元素、获取数组长度与特定索引的元素、修改元素以及判断元素是否存在等。此外还展示了如何利用 `concat()` 方法或扩展运算符合并数组。这些实用示例有助于前端开发者更好地理解和应用数组。
30 0
|
4月前
|
移动开发 前端开发 JavaScript
高级前端工程师必备的技能
【7月更文挑战第8天】 **高级前端工程师**精通HTML5/CSS3/JavaScript,擅长React、Vue等框架,掌握性能优化、代码质量保证,能设计可扩展架构,处理前端安全,熟悉跨平台开发,持续学习新技术并领导团队,是技术与管理的结合体。他们对提升用户体验和推动技术创新起关键作用。
460 12
|
4月前
|
缓存 开发框架 前端开发
前端性能优化【前端必备】(含懒加载,手写防抖、节流等)
前端性能优化【前端必备】(含懒加载,手写防抖、节流等)
69 4
|
6月前
|
前端开发 JavaScript UED
【专栏】前端开发中,为解决用户操作引发的性能问题,常使用debounce(防抖)和throttle(节流)技术
【4月更文挑战第29天】前端开发中,为解决用户操作引发的性能问题,常使用debounce(防抖)和throttle(节流)技术。Debounce确保在一段时间内只执行最后一次事件触发的操作,减少不必要的执行,但有滞后性,适合搜索框实时搜索。Throttle则保证一定时间间隔内函数执行一次,保持固定频率,适用于滚动事件处理和窗口大小调整。两者可借助JavaScript或第三方库实现,需根据场景和需求选择并调整。正确使用能提升应用性能和用户体验。
47 1