【CSS节流】实现防止按钮重复点击

众所周知,函数节流(throttle)是 JS 中一个非常常见的优化手段,可以有效的避免函数过于频繁的执行。

举例:在JavaScript中,可以使用节流(throttling)来控制事件的触发频率,以确保在一定时间内只执行一次相应的操作。对于保存按钮的点击行为,可以使用节流函数来确保在一定时间内只允许提交一次。

以下是使用js进行节流的方式:

javascript 复制代码
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 动画的精准控制

假设有一个按钮,绑定了一个点击事件,这时连续点击按钮就会不断地触发:

html 复制代码
<button onclick="console.log('保存')">保存</button>

完整代码如下,很好地限制了点击频率:

css 复制代码
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;
  }
}

完成~

相关推荐
IT_陈寒8 分钟前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip7 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫8 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel9 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼10 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手13 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法13 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku14 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode14 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu14 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript