js防抖节流

防抖
事件触发并经过一段时间间隔后执行一次事件处理函数，也就是说不管你触发了多少次事件，在这段事件就只能触发一次

节流
在某一高频触发下，我们不只是识别一次，按照自己设定的间隔时间（自己规定的频率），每达到这个频率都会被触发

具体代码示例

		// 节流（相当于写个计时器到点就执行）
        var canRun = true
        window.onresize = function() {
            if(!canRun) {
                return
            }
            canRun = false
            setTimeout(() => {
                console.log("函数节流")
                canRun = true
            },1000)
        }
        
		// 防抖（当该事件结束后指定时间执行）
        function fun() {
            console.log('onresize')
        } 
        function debounce(fn,delay) {
            var timeID = null
            // 考虑维护全局纯净，可以借助闭包来实现
            return function() {
                clearInterval(timeID)
                timeID = setTimeout(() => {
                    fn()
                },delay)
            }
        }
        window.addEventListener('resize',debounce(fun,500))

使用场景

debounce（防抖）

• search搜索联想，用户在不断输入值时，用防抖来节约请求资源
• window触发resize的时候，不断的调整浏览器大小会不断的触发这个事件，用防抖来让其只触发一次

throttle（节流）

• 鼠标不断点击触发，mousedown(单位时间内只触发一次)
• 监听滚动事件，比如是否滑倒底部自动加载更多