防抖和节流

防抖节流实现与原理

我们都知道，当我们平时在开发的时候会遇到一些场景，例如说监听滚动条，移动到一定位置的时候，会出现顶部导航。如下图：

image

但是我们也知道，在正常的情况下，我们监听滚动条的时候，会发现触发的频率实在是太高了。举个例子

    function scrollTop() {
        if (document.documentElement.scrollTop > 300) {
        console.log(1)
      }
    }
    document.addEventListener('scroll', scrollTop)

我们打印一下就可以发现,这个实在是太多了！！

image

假设有个用户没事不停的滚动滚动条，这样就会十分影响性能。(你可能会想哪有人这么无聊啊，但是借我老师的一句话，就是要把用户当成小孩子你的产品才会成功)

言归正传，那么面对这种场景，我们有什么解决方案呢? 这个时候就要隆重介绍我们今天的主角之一防抖

防抖

防抖，顾名思义就是防止手抖。就是为了防止用户不小心(故意)拖动滚动条，带来的大量运算从而导致页面性能下降。

其实防抖的原理，就是利用定时器，setTimeout 让监听滚动之后执行的行为只在用户停止操作滚动条后的固定时间之后才执行。可能这里说得有点绕，下面就直接上代码你应该就能看懂了。

    function debounce(fn, delay) {
            let lock = null;
            return function () {
                if (lock) {
                    clearTimeout(lock)
                }
                lock = setTimeout(()=>{
                    fn()
                },delay)
            }
        }

        function scrollListen() {
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
            console.log('滚动条的top高度:' + scrollTop)
        }
        addEventListener('scroll', debounce(scrollListen,200))

之后再测试滚动条，查看控制台打印就会发现，每一次的打印都会在200ms之后出现啦。这样就完成了我们想要的效果了(再也不用担心熊孩子搞破坏了!)

---

看到这里说明进度条以及过半了，我们看标题就知道，我们这篇文章是双主角的设定的。下面就来介绍一下另一个主角。

假设现在有一个场景:我们需要在不断滚动拖动滚动条的时候，需要在一定的时间后给出一些反馈

那么我们要怎么处理这个场景呢? 处理方案想必聪明如你已经知道我接下来要说的是什么了吧！

没错就是利用节流。

节流

节流意思其实就是，节省流出。什么意思呢，举个栗子节流就像是一个被设定了时间开关的水龙头。他会在一定时间过后自动开启排水，并且重置定时开关的时间。(类似英雄的技能冷却)

实现： 我们可以借助定时器setTimeout，在设定的时间到达之后打开阀门。

废话不多说，直接上代码吧!

    // 节流
    function throttle(fn, delay) {
        let lock = true         // 锁
        return function () {
            if (!lock) {
                return 
            }
            lock = false        // 锁上
            setTimeout(()=>{
                fn()
                lock = true     // 开锁
            },delay)
        }
    }

    function scrollListen() {
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
            console.log('滚动条的top高度:' + scrollTop)
        }
    window.onscroll = throttle(scrollListen, 200)

节流其实并没有太神奇，其实就是上一个锁，然后利用定时器来开锁。

---

感谢您的阅读，讲得不好的地方还请多多包涵

以上