网站建设p香水推广软文

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

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

一、传统JS节流实现方式

   /* 1.时间戳实现 */function throttle(func, delay) {let prev = 0return function(...args){let now = new Date()if(now - prev > delay){prev = new Date()func.apply(this, args)}}}/* 定时器实现 */function throttle(func, delay) {let timer = nullreturn function(...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;}