手写节流throttle

节流 throttle（一段时间内只执行一次handle函数）

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)
})

简单的节流实现的逻辑

给div监听拖拽事件，一开始timer为null，在100ms之内设置一个计时器赋值给timer，当到达100ms时触发计时器，返回打印拖拽的实时坐标，将null赋值给timer，之后继续拖拽，再次创建一个新的计时器赋值给timer，在100ms内，拖拽是不间断执行的，每隔100ms打印一次结果。

工具化写法

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))