防抖和节流

防抖的目的：为了减少因函数的频繁调用而加重浏览器负担

防抖：在指定时间内，多次触发事件该事件只能被执行一次，指定时间过后可再次执行

       /*
         @param fn 函数
        */
        function debounce(fn) {
            let time = null;
            return function () {
                //清除前一个定时器
                clearTimeout(time);
                //创建新的定时器，使用apply修复this指向
                time = setTimeout(() => {
                    a.apply(this, arguments)
                }, 1000)
            }
        }
        function a() {
            let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
            console.log('top-->',scrollTop)
        }

        window.onscroll = debounce(a)

 节流：在指定时间内，只能触发一次事件，该时间过后可再次触发事件。

　　　　　/* 
　　　　　　　@param fn 函数 
　　　　　*/
        function throttle(fn) { 
            //记录是否在时间内
            let time = true;
            return function () {
                if(!time) {
                    return ;
                }
                time = false;
                setTimeout(() => {
                    fn.apply(this,arguments);
                    // 在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循    环了。当定时器没有执行的时候标记永远是false，在开头被return掉
                    time = true;
                },1000)
            }
        }

        function a() {
            let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
            console.log('top-->',scrollTop)
        }

        window.onscroll = throttle(a)

 

总结：防抖是将多次执行变为执行一次，节流是将多次执行变成每隔一段时间执行（防抖是防止频率，节流是防止次数）