手写防抖和节流函数

防抖和节流

防抖：

定义：

用户操作页面时，距离最近一次触发事件的时间超过设定的时间间隔才会执行一次回调函数。
（在设定的时间间隔内重复触发多次事件，只会在设定的时间间隔之后执行一次回调函数）

应用场景：
1.input输入内容时。

精简版代码：

//debounce
function debounce(fn,delay=500){
    let timer = null //timer是闭包中的
    return function(){
        if(timer) clearTimeout(timer)
        timer = setTimeout(()=>{
            fn.apply(this,arguments)
            timer = null
        },delay)
    }
}

节流：

定义：

用户操作页面时，在持续触发事件的时间段内，每过一段设定的时间间隔，就会执行一次回调函数。

应用场景：
1.拉动滚动条时。
2.滑动验证码滑块时。
3.拖拽元素时。

精简版代码：

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