原来CSS 也可以节流啊

Ⅰ、前言

  • 节流 是为了减少请求的触发频率,不让用户点的太快,达到节省资源的目的 ;
  • 通常 我们采用 JS 的 定时器 setTimeout ,来控制点击多少秒才能在触发;
  • 其实 通过 CSS 也能达到 节流 的目的,下面我们来看一下把

在这里插入图片描述

Ⅱ、用CSS 节流

1、pointer-events 属性

属性值 :all / none

  • all : 可以触发该元素绑定的监听事件 ;
  • none : 无法触发绑定的监听事件 ;
<style>
    .btn {
        pointer-events: none;
    }
style>
<body>
    <button class="btn" onclick="btnClick()"> 按钮 button>
body>
<script>
    function btnClick(){  console.log(123) }
script>
  • 清楚可以发现事件无法触发

既然如此 ,我们可以通过 点击后 动画(animation), 来设置多少秒后可以触发

2、利用动画实现 节流

  • 通过 active 鼠标点击的时候,清空动画
  • 鼠标松开时,重新启动动画 (2s 以后才能触发 onclick 事件)
<style>
    .btn {
        pointer-events: all;
        animation: btnAnim 2s step-end forwards;
    }
    .btn:active {
        animation: none
    }   
    @keyframes btnAnim {
        from {
            pointer-events: none;
        }
        to {
            pointer-events: all;
        }
    }
style>
<body>
    <button class="btn" onclick="btnClick()">  按钮 button>
body>
<script>
    function btnClick(){  console.log(123) }
script>

3、优势和缺陷

优势

  • ① 十分 简单,不需要操作 JS ;
  • ② 可以发挥 CSS 选择器 的优势,批量 设置节流

缺点

  • ① 页面刚进入,也要等动画 (animation)时间;
  • ② 可以通过控制台 ,修改样式,绕过节流 ,所以一些重要的功能,不能使用;

你可能感兴趣的:(趣学,CSS,css,前端)