throttle

手写节流throttle

拖拽一个元素时，要随时拿到该元素被拖拽带的位置

直接用drag事件，则会频繁触发，很容易导致卡顿

节流：无论拖拽速度多快，都会每100ms触发一次

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

节流

    function throttle(fn,delay=100){
    let timer = null;

    return function(){
        if(timer){
            return
        }
        timer = setTimeout(()=>{
            fn.apply(this,arguments)
            timer=null
        },delay)
    }
}

div1.addEventListener('drag',throttle(function(e){
    console.log(e.offsetX,e.offsetY)
},200))