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

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

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

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

节流是什么?

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

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

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

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



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

热门文章

最新文章

  • 1
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 4
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 7
    前端如何禁止用户打开 F12 开发者工具
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
  • 1
    前端如何禁止用户打开 F12 开发者工具
    124
  • 2
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    176
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    50
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    112
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    78
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    177
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    158
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    90
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    48
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    85