JavaScript学习笔记之防抖与节流

防抖与节流：

相同点：在不影响客户体验的前提下，将频繁的回调函数，进行次数缩减，避免大量计算导致页面卡顿。

不同点：防抖是将多次执行变为最后一次执行，节流是将多次执行变为在规定时间内只执行一次。

防抖：在规定时间内回调函数只能执行一次，如果在规定时间内又触发了该事件，则会重新开始算规定时间。其实就是延迟执行。

应用场景：

• 输入搜索联想，用户在不断输入值时，用防抖来节约请求资源
• 按钮点击：收藏，点赞等。

原理：

通过定时器将回调函数进行延迟。如果在规定时间内继续回调，发现存在之前的定时器，则将该定时器清除，并重新设置定时器。

 // 回调函数
    function callback() {
        console.log(1234)
    }
    // 准备包装函数
    // 1，保存定时器标志
    // 2，返回闭包函数
    function debounce(fun, delay = 500) {
        return function (args) {
            let that = this
            let _args = args
            clearTimeout(fun.timer)
            fun.timer = setTimeout(function () {
                fun.call(that, _args)
            }, delay)
        }
    }
    let debounceCallback = debounce(callback, 500)
    // 添加事件监听
    let input = document.getElementById('debounce')
    input.addEventListener('keyup',function (ev) { 
        debounceCallback(ev.value)
    })

节流：当持续触发事件时，在规定时间段内只能调用一次回调函数。如果在规定时间内又触发了该事件，则什么也不做，也不会重置定时器。

应用场景：

• 鼠标不断点击触发，点击事件在规定时间内只触发一次（单位时间内只能触发一次）
• 监听滚动事件，比如是否滑到底部自动加载更多

原理：

定时器：通过闭包保存上一次定时状态。然后事件触发时，如果定时器为null（即代表此时间隔已经大于规定时间），则设置新的定时器。到时间后再执行回调函数，并将定时器置为null。

function throttle(fun, delay = 500) {
        let timer
        return function (args) {
            let that = this;
            let _args = args;
            if(!timer) {
                timer = setTimeout(function () {
                    timer = null
                    fun.apply(that, _args)
                },delay)
            }
        }
    }

用一个函数实现防抖节流功能：

const throttle = function(fn,delay,isBebounce) {
    let timer;
    let lastCall = 0;
    return function(...args) {
        if(isBebounce) {
            if(timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(function(){
                fn.apply(this,...args);
            },delay)
        } else {
            var prev = new Date();
            if(prev - lastCall > delay) return
            lastCall = prev;
            fn.apply(this,...args);
        }
    }
}