封装防抖方法

• 函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间

函数防抖的要点，是需要一个 setTimeout 来辅助实现，延迟运行需要执行的代码。如果方法多次触发，则把上次记录的延迟执行代码用 clearTimeout 清掉，重新开始计时。若计时期间事件没有被重新触发，等延迟时间计时完毕，则执行目标代码。

        // 封装一个防抖方法对业务逻辑函数进行防抖包装并设置防抖时间。
        function debounce(fn, delay) {
            let i = null
            console.log(this);
            return function () {
                //用if做个判断以便清除之前触发的事件，保留最后一次事件
                if (i !== null) {
                    clearTimeout(i);
                }
                i = setTimeout(() => {
                    fn.call(this)  //必须通过call改变this指向input元素,否则绑定的是window
                }, delay);
            }
        }

        // 输入框的防抖处理
        let input = document.querySelector('input')
        function f1(){
            console.log(this.value);
        }
        input.oninput = debounce(f1,500)

 

• 节流就是每隔n的时间调用一次函数，而不是一触发事件就调用一次，这样就会减少资源浪费

　　

        let input = document.querySelector('input')
        let f1 = function () {
            console.log(this.value);
        }
        input.oninput = throttle(f1, 1000)

        function throttle(fn, delay) {
            let flag = true
            return function () {
                if (flag) {
                    flag = false
                    setTimeout(() => {
                        fn.call(this)
                        flag = true
                    }, delay);
                }
            }
        }

 

俩者区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。