防抖、节流处理-浏览器滚动(三)

当事件被触发时，设定一个定时器，若期间又被触发，则重新设定周期，直到周期结束

        //需求:监听浏览器滚动事件，返回当前滚条与顶部的距离

        //需求实现(未处理版)
        function watchScroll() {
            let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
            console.log(scrollTop)
        }
        window.onscroll = watchScroll

        //需求实现(debounce处理版)
        //如果不做处理,在拖动滚动条时这个函数触发的频率会很高,为了不浪费浏览器性能,这里可以用上防抖函数
        /**
         * @param fn:需要防抖处理的函数,delay:防抖设置的间隔
         * @return function
         */
        function debounce(fn, delay) {
            let timer = null
            //这里用到了闭包,每次onscroll触发都会调用下一行返回的匿名函数,所以timer=null只会执行一次,并且timer会一直保留到闭包函数销毁为止      
            return function () {
                if (timer) {
                    clearTimeout(timer)
                    timer = setTimeout(fn, delay)
                } else {
                    timer = setTimeout(fn, delay)
                }
            }
        }