住宅与建设部网站,网站建设 海拉尔,宝塔 怎么做网站,先做他个天猫网站Ⅰ、前言
「节流」 是为了减少请求的触发频率#xff0c;不让用户点的太快#xff0c;达到节省资源的目的 #xff1b;通常 我们采用 JS 的 定时器 setTimeout #xff0c;来控制点击多少秒才能在触发#xff1b;其实 通过 CSS 也能达到 「节流」 的目的#xff0c;下面…Ⅰ、前言
「节流」 是为了减少请求的触发频率不让用户点的太快达到节省资源的目的 通常 我们采用 JS 的 定时器 setTimeout 来控制点击多少秒才能在触发其实 通过 CSS 也能达到 「节流」 的目的下面我们来看一下把 Ⅱ、用CSS 节流
1、pointer-events 属性
属性值 all / none
all : 可以触发该元素绑定的监听事件 none : 无法触发绑定的监听事件
style.btn {pointer-events: none;}
/style
bodybutton classbtn onclickbtnClick() 按钮 /button
/body
scriptfunction 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
bodybutton classbtn onclickbtnClick() 按钮 /button
/body
scriptfunction btnClick(){ console.log(123) }
/script3、优势和缺陷
优势
① 十分 简单不需要操作 JS ② 可以发挥 CSS 「选择器」 的优势批量 设置「节流」
缺点
① 页面刚进入也要等动画 animation时间② 可以通过控制台 修改样式绕过节流 所以一些重要的功能不能使用
