节流和防抖

防抖（debounce）

什么是防抖

在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。

应用场景

(1) 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源；

(2) window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次；

实现

        // 防抖
        var nav = document.querySelector('.nav')
        function debounce(func, wait, immediate) {
            var timeout;
            return function () {
                var context = this,
                    args = arguments
                var later = function () {
                    timeout = null
                    if (!immediate) func.apply(context, args)
                };
                var callNow = immediate && !timeout
                clearTimeout(timeout)
                timeout = setTimeout(later, wait)
                if (callNow) func.apply(context, args)
            }
        }

        var myEfficientFn = debounce(function () {
            //滚动中的操作
            console.log('1')
            if (window.pageYOffset >= 200) {
                nav.style.display = 'block'
            } else {
                nav.style.display = 'none'
            }
        }, 250)
        
        // 绑定监听
        window.addEventListener('scroll', myEfficientFn)

代码说明：

1.每一次事件被触发，都会清除当前的 timer 然后重新设置超时调用，即重新计时。 这就会导致每一次高频事件都会取消前一次的超时调用，导致事件处理程序不能被触发；

2.只有当高频事件停止，最后一次事件触发的超时调用才能在delay时间后执行；

节流（throttle）

1 .什么是节流

规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

 2 应用场景

1)鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；

(2)在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；

(3)监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断；

实现

        // 节流
        var nav = document.querySelector('.nav')
        function throttle(func, wait, mustRun) {
            var timeout,
                startTime = new Date();
            return function () {
                var context = this,
                    args = arguments,
                    curTime = new Date();

                clearTimeout(timeout);
                // 如果达到了规定的触发时间间隔，触发 handler
                if (curTime - startTime >= mustRun) {
                    func.apply(context, args);
                    startTime = curTime;
                    // 没达到触发间隔，重新设定定时器
                } else {
                    timeout = setTimeout(func, wait);
                }
            };
        };
        // 实际想绑定在 scroll 事件上的 handler
        function realFunc() {
            console.log('1')
            if (window.pageYOffset >= 200) {
                nav.style.display = 'block'
            } else {
                nav.style.display = 'none'
            }
        }
        // 采用了节流函数
        window.addEventListener('scroll', throttle(realFunc, 500, 1000));

小结

总结下防抖和节流的区别：

-- 效果：

函数防抖是某一段时间内只执行一次；而函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。

-- 原理：

防抖是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发。

节流是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。