【CSS节流】实现防止按钮重复点击
2024-01-03 11:11:23
众所周知,函数节流(throttle)是 JS 中一个非常常见的优化手段,可以有效的避免函数过于频繁的执行。
举例:在JavaScript中,可以使用节流(throttling)来控制事件的触发频率,以确保在一定时间内只执行一次相应的操作。对于保存按钮的点击行为,可以使用节流函数来确保在一定时间内只允许提交一次。
以下是使用js进行节流的方式:
function throttle(func, delay) {
let canRun = true;
return function() {
if (canRun) {
func.apply(this, arguments);
canRun = false;
setTimeout(() => {
canRun = true;
}, delay);
}
};
}
// 模拟一个保存操作的函数
function saveData() {
console.log("数据已保存");
}
// 创建节流函数
var throttledSave = throttle(saveData, 300); // 300ms为节流的时间间隔
// 绑定按钮点击事件
document.getElementById('saveBtn').addEventListener('click', throttledSave);
其实除了 JS 方式, CSS 也可以非常轻易的实现这样一个功能,无需任何框架库,一起看看吧!
一、CSS 实现思路分析
CSS 实现和 JS 的思维不同,需要从另一个角度去看待这个问题。
比如这里需要对点击事件进行限制,可以使用pointer-events
;
然后是时间的限制,每次点击后需要自动禁用300ms,可以使用animation
;
除此之外,还需要有点击行为,所以必然和伪类:active
有关联。
二、具体实现:CSS 动画的精准控制
假设有一个按钮,绑定了一个点击事件,这时连续点击按钮就会不断地触发:
<button onclick="console.log('保存')">保存</button>
完整代码如下,很好地限制了点击频率:
button{
/*动画缓动函数:设置成了step-end阶梯曲线,它可以很方便的控制pointer-events的变化时间点。*/
animation: throttle 2s step-end forwards;
}
button:active{
animation: none;
}
@keyframes throttle {
from {
pointer-events: none;
}
to {
pointer-events: all;
}
}
完成~
文章来源:https://blog.csdn.net/weixin_48596030/article/details/135354834
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!