首页 > 其他分享 >css节流

css节流

时间:2023-02-10 11:57:24浏览次数:44  
标签:throttle 节流 JS 点击 CSS pointer events 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的状态。.

 

标签:throttle,节流,JS,点击,CSS,pointer,events,css
From: https://www.cnblogs.com/chailuG/p/17108410.html

相关文章

  • vue 防抖节流器
    节流器:在一定时间内频繁的触发函数只会执行一次应用场景:我这里有一个图表需要在窗口改变大小的时候重绘图表的大小,但是窗口改变大小的事件过于频繁,需要增加一个节流器来进......
  • 防止滚动 css 样式 overscroll-behavior
    overscroll-behaviorhttps://developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior  别人的问题人家的点击空白还能缩小,我不知道怎么做的.试了全局遮罩,......
  • threejs_单例模式_项目结构_tansform控制器_css2dlabel_事件派发EventDispacher_事件
    /Users/song/Code/threejs_learn_vanilla_class_singleton/threejs_learn_vanilla_ts_class_singleton/src/main.tsimport"./style.css";importBasefrom"./threejs/......
  • css样式居中
    水平居中1.块级元素margin:0auto;.container{height:100px;width:300px;border:1pxsolidred;}.content{width:60px;......
  • 学习css的第三天~
    高级选择器:1、后代选择器元素E空格元素F(改变F元素,且F元素是被E元素包含在内的) 2、子选择器元素E>元素F(改变E元素,且F元素是匹配E元素的子元素) 3、相邻兄弟选......
  • 直播软件app开发,CSS超出隐藏并且能滚动
    直播软件app开发,CSS超出隐藏并且能滚动实现CSS代码: height:500rpx;overflow-x:hidden;overflow-y:scroll;​效果图的代码:<!--豆豆明细弹窗--><viewclass="mxB......
  • css 样式初始化+element-ui样式优化+常见样式优化
    @importurl('https://at.alicdn.com/t/font_2595646_76zzktmge22.css');//引入自己某个项目的iconfont图标库body,html{margin:0;padding:0;background:rgba(......
  • 如何利用CSS画一个聊天消息对话框?
    要画一个对话框,首先来学习做一个三角形。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-......
  • CSS中BFC的渲染规则有哪些?有哪些应用场景?
    1.BFC渲染规则1. BFC垂直方向边距重叠;2. BFC的区域不会与浮动元素的box重叠;3.BFC是一个独立的容器,外面的元素不会影响里面的元素;4. 计算BFC高度的时候浮动元素也会参......
  • CSS 如何实现“品”字布局?
    实现代码如下: <!doctypehtml><html><head><metacharset="utf-8"><title>品字布局</title><style>*{margin:0;padding:0;}body{......