关于javascript:手写防抖和节流函数

防抖和节流

防抖：

定义：

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

利用场景：
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)
    }
}