节流还在用JS吗？CSS也可以实现哦

函数节流是一个我们在项目开发中常用的优化手段，可以有效避免函数过于频繁的执行。一般函数节流用在scroll页面滚动，鼠标移动等。

为什么需要节流呢，因为触发一次事件就会执行一次事件，这样就形成了大量操作dom,会出现卡顿的情况。

一、传统JS节流实现方式

/* 1.时间戳实现 */functionthrottle(func, delay){let prev =0returnfunction(...args){let now =newDate()if(now - prev > delay){
          prev =newDate()func.apply(this, args)}}}/* 定时器实现 */functionthrottle(func, delay){let timer =nullreturnfunction(...args){if(!timer){
          timer =setTimeout(()=>{
            timer =nullfunc.apply(this, args)},delay)}}}

二、CSS实现
1.实现思路

我们可以使用css的pointer-events禁用点击事件对事件进行控制。
使用animation设置禁用时间，对时间进行限制。
使用:active点击行为作为触发时机

可以这样理解，一个CSS动画从禁用到可点击的变化，每次点击时让这个动画重新执行一遍，在整个执行过程设置的时间范围内一直处于禁用的状态，这是不是就有点像节流的功能。

2.具体实现
假设一个按钮，连续点击按钮就会一直触发事件。

<button onclick="console.log('111')">点击按钮</button>

使用pointer-events实现一个动画，从禁用到可点击。

 @keyframes throttle {
    from {color: green;
      pointer-events: none;}
    to {color: black;
      pointer-events: all;}}
  button {animation: throttle 3s step-end forwards;}button:active {animation: none;}