css节流

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

举个例子：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，比如只允许每300ms提交一次，这时候我想大部分同学都会到网上直接拷贝一段throttle函数，或者直接引用lodash工具库

btn.addEventListener('click', _.throttle(save, 300))

其实除了 JS 方式， CSS 也可以非常轻易实现这样一个功能，无需任何框架库，一起看看吧

CSS 实现思路分析

CSS 实现和 JS 的思维不同，需要从另一个角度去看待这个问题。

比如这里的需要对点击事件进行限制，也就是禁用点击事件，想想有什么方式可以禁用事件，没错，就是pointer-events;

然后是时间的限制，每次点击后需要自动禁用300ms，时间过后重新恢复，那么，有什么特性和时间以及状态恢复有关呢？没错，就是animation;

除此之外，还需要有触发时机，这里是点击行为，所以必然和伪类:active有关联。

<--  html  -->

<button onclick="console.log('保存')">保存</button>

<--  html  -->


<--  css部分  -->
button{

  animation: throttle 2s step-end forwards;

}

button:active{

  animation: none;

}

@keyframes throttle {

  from {

    pointer-events: none;

  }

  to {

    pointer-events: all;

  }

}

注意，这里动画的缓动函数设置成了阶梯曲线，step-end，它可以很方便控制pointer-events的变化时间点。

pointer-events在0~2秒内的值都是none，一旦到达2秒，就立刻变成了all，由于是forwards，会一直保持all的状态。.

巴特西

css节流

CSS 实现思路分析

最新文章

热门文章