一、js方法

const box = document.getElementById("box")
let timer = null
box.addEventListener('drag', function (e) {
    if (timer) {
        return
    }
    timer = setTimeout(() => {
        console.log(e.offsetX, e.offsetY)
        timer = null
    },100)
})


// 写成通用函数形式
function throttle (ele, t) {
    let time = null
    ele.addEventListener('drag', function (e) {
        if (timer) {
            return
        }
        timer = setTimeout(() => {
            console.log(e.offset, e.offsetY)
            timer = null
        },t)
    })
}

二、css方法

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

首先要用pointer-events禁用点击事件，对点击事件进行限制

其次是利用animation实现时间以及状态的恢复

最后利用:active作为触发时机

这种场景可以理解为对css动画的控制，即一个动画控制按钮从禁用->可用点击的变化，每次点击时让这个动画重新执行一遍，在执行的过程中，一直处于禁用状态，从而实现节流

实现代码如下

button{ 
    animation: throttle 2s step-end forwards; 
  } 
  //如果需要改限制时间，直接改动画时间就行了
button:active{
     animation: none;
  } 
  
@keyframes throttle { 
  from {    
     pointer-events: none;  
   }  
  to {  
     pointer-events: all;  
   }
  }

使用css实现节流相对于js实现更精简，使用更简单，并没有框架限制，它的实现思路在于找到和该场景相关联的属性，使得禁用逻辑和业务逻辑是完全解耦，但这种实现方式比较局限，仅限于点击事件

点击事件的节流实现

一、js方法

二、css方法