利用Css实现按钮节流

更新日期: 2023-01-29阅读: 642标签: 节流

节流是指避免过于频繁地执行某个功能,例如保存按钮。 为了避免重复提交或者服务器的考虑,往往需要限制点击行为,否则接口会被频繁请求。 之前基本都是通过js控制节流问题,其实css也可以实现节流。


一、利用pointer-events实现节流

思路:

  1. 使用pointer-events来限制点击事件,即禁用点击事件。
  2. 使用动画改变当前按钮是否可以点击
  3. 使用伪类:active触发按钮计时,即点击行为

代码

<button class="throttle" onclick="console.log('节流')">保存</button>
<style>
.throttle {
animation: throttle 2s step-end forwards;
}
.throttle:active {
animation: none;
}
@keyframes throttle {
from {
pointer-events: none;
}
to {
pointer-events: all;
}
}
</style>

如果需要改限制时间,直接改动画时间就行了。


二、监听css的transition实现节流

思路:

通过:active去触发transition变化,然后通过监听transition回调去动态设置按钮的禁用状态。

代码:

<button onclick="console.log('节流')">保存</button>
<style>
button{
opacity: .99;
transition: opacity 2s;
}
button:not(:disabled):active{
opacity: 1;
transition: 0s;
}
</style>

然后监听transition的起始回调:

// 过渡开始
document.addEventListener('transitionstart', function(ev){
ev.target.disabled = true
})
// 过渡结束
document.addEventListener('transitionend', function(ev){
ev.target.disabled = false
})


总结

上面通过 CSS的思想实现了一个类似于“节流”的功能。 与JS实现相比,实现更精简,更易上手,无框架限制。 

下面总结一下实现的要点:

  • Function throttling 是一种很常见的优化方法,可以有效避免函数执行过于频繁。
  • CSS的实现思路和JS是不一样的。 关键是找到与场景关联的属性。
  • 对一个动画的精确控制,假设有一个动画控制按钮从disabled->clickable变化,使得每次点击动画都重新执行,在执行过程中一直处于disabled状态,从而实现“节流”效果。
  • 也可以通过transition的回调函数动态设置按钮的disabled状态,这样实现的好处是disabled逻辑和业务逻辑完全解耦。

但是, 这个实现还是比较局限的,只限于点击行为,安全性不高,可以通过 ui层面去绕开,像很多时候,可能会在滚动事件或者键盘事件上使用节流,这些场景可以用传统的方式实现。

链接: https://www.fly63.com/article/detial/12335

React 涉及e.target时候,使用debounce节流函数

在一个input搜索框中输入文本,如果2s内可能会有很多次input的onChange事件,每次都触发一个API请求,明显不合理,所以此时需要debounce节流函数,2s之内的所有输入只会请求一次API

前端防抖和节流

窗口的resize、scroll、输入框内容校验等操作时,如果这些操作处理函数是较为复杂或页面频繁重渲染等操作时,在这种情况下如果事件触发的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕

防抖与节流常见的几种实现方式

在限制的时间内持续触发事件的时候,函数是完全不执行的,非立即执行版,等最后一次触发结束的一段时间之后,再去执行,节流的意思是让函数有节制地执行

vue全局防抖和节流

一种是立即执行:频繁触发事件,第一次触发时执行函数,后面触发不会执行,停止触发,间隔一定时间之后再触发事件,函数才会再次执行

函数防抖和节流

函数防抖和节流都是对高频动作触发回调函数的一个优化,实现方式上有类似之处。先从使用场景做个区分。

JS 节流函数(throttle)与防抖函数(debounce)

节流:在一定时间内连续触发某事件,在这段时间段内只执行首次触发的那一次。1s内执行第一次,防抖:在一定时间内连续触发某事件,在这段时间内只执行最后一次触发的那一次。最后一次延时1s后执行

节流与防抖

概念:在规定的间隔时间范围内不会重复触发回调,只有大于这个时间间隔才会触发回调,把频繁触发变为少量触发。类似于技能CD。应用:点击按钮,轮播图点击左右箭头。

Vue 2 中的实现 CustomRef 方式防抖/节流

今天给大家带来的是Vue 2 中的实现 CustomRef 方式防抖/节流这篇文章,前几天利用 customRef 实现了在 vue 3 中的极致防抖/节流的新方式。在前端的开发过程中,在涉及到与用户交互的过程中是基本上都是需要处理的

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!