防抖和节流函数

什么是防抖函数：举个例子来说，你用鼠标拖动滚动条来获取滚动的距离，实际上控制台是不停的在打印console.log出来，防抖函数就是在你最后滚动的那一下才console.log打印出滚动的高度

防抖函数的封装

    function scrollTop() {
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log('滚动条位置：' + scrollTop);
    }
    window.onscroll = debounce(scrollTop, 1000) //只要滚动条滚动就会实时触发// 防抖
    function debounce(fn, delay) {
        let time = false //第一次进来time为false，走else
        return function(){
            if (time) {
                clearTimeout(time) //滚动条在不断的滚动，我们不断的清除定时器（重新初始化定时器，在重新设置定时器）
                time = setTimeout(fn, delay) //又重新设置定时器，
            } else {
                time = setTimeout(fn, delay) //进来第一次先进入这里，然后time被赋值 != false,如果滚动条在继续滚动，接着马上进入time == true中
            }
        }
    }

什么是节流函数：你用鼠标拖动滚动条来获取滚动的距离，每隔一段时间console.log一次滚动的距离

节流函数的封装

    function scrollTop() {
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log('滚动条位置：' + scrollTop);
    }

    window.onscroll = throttle(scrollTop, 1000) //只要滚动条滚动就会实时触发

    function throttle(fn, delay) {
        let flag = true //初始化flag，默认为true
        return function(){
            if(!flag){ //如果flag为false了，则不再执行后面的内容(禁止setTimeout函数被重复的执行)
                return false
            }

            flag = false // 改变flag的状态

            setTimeout(()=>{ //n秒后执行函数fn，并且将flag改为true
                fn()
                flag = true //将flag改为true，不在走return false
            },delay)
        }
    }