#青训营笔记创作活动#
1月30日 打卡day13
今日学习:
还在用JS做节流吗?CSS也可以防止按钮重复点击
通过 CSS 的思路实现了类似“节流”的功能,相比 JS 实现而言,实现更精简、使用更简单,没有框架限制,下面一起总结一下实现要点:
函数节流是一个非常常见的优化方式,可以有效避免函数过于频繁的执行
CSS 的实现思路和 JS 不同,重点在于在于找到和该场景相关联的属性
CSS 实现“节流”其实就是控制一个动画的精准控制,假设有一个动画控制按钮从禁用->可点击的变化,每次点击时让这个动画重新执行一遍,在执行的过程中,一直处于禁用状态,这样就达到了“节流”的效果
还可以通过 transition 的回调函数动态设置按钮禁用态
这种实现的好处在于禁用逻辑和业务逻辑是完全解耦的
1月30日 打卡day13
今日学习:
还在用JS做节流吗?CSS也可以防止按钮重复点击
通过 CSS 的思路实现了类似“节流”的功能,相比 JS 实现而言,实现更精简、使用更简单,没有框架限制,下面一起总结一下实现要点:
函数节流是一个非常常见的优化方式,可以有效避免函数过于频繁的执行
CSS 的实现思路和 JS 不同,重点在于在于找到和该场景相关联的属性
CSS 实现“节流”其实就是控制一个动画的精准控制,假设有一个动画控制按钮从禁用->可点击的变化,每次点击时让这个动画重新执行一遍,在执行的过程中,一直处于禁用状态,这样就达到了“节流”的效果
还可以通过 transition 的回调函数动态设置按钮禁用态
这种实现的好处在于禁用逻辑和业务逻辑是完全解耦的
展开
评论
点赞