JS的防抖和节流

目录

零、序言

1、防抖

2、节流

---

零、序言

在开发过程中我们经常绑定高频发事件，resize,scroll,mousemove...,而不想让当前事件对应的事件处理函数实时触发，不利于性能优化，防抖和节流都是用来做性能优化的。 

1、防抖

在一个事件发生一定时间之后，才执行特定动作（这个动作完成，一定时间后才执行）。

    // 浏览器窗口大小的改变，触发shake函数
    window.onresize = shake(getwh, 1000);

    //shake函数执行，并声明一个函数timer，返回一个函数，形成闭包
    function shake(fun, wait) {
        var timer;//第一次执行该函数时，timer是没有值的
        return function () {
            if (timer) {  //如果timer有值，则往下执行，清除timer，
                clearTimeout(timer);
            }
            timer = setTimeout(fun, wait);//timer没有值，给timer赋值，在浏览器窗口的动作停止的wait值毫秒后，执行fun函数，
        }
    }

    //封装一个可以获取浏览器可视宽高的函数；
    function getwh() {
        var winW = document.documentElement.clientWidth;//获取浏览器可视宽
        var winH = document.documentElement.clientHeight;//获取浏览器可视高
        console.log(winW, winH);//将宽高打印在控制台
    }

2、节流

在一定时间之内，限制一个动作只执行一次 。 (例如：在人还活着的时候限制一天时间内只能吃一顿饭，100天就是100顿饭，到时间就吃，     人死了，就一顿也不吃了)

    // 浏览器滚动条滑动，触发节流函数（throttle），并赋予实参；
    window.onscroll = throttle(getScroll, 1000);

    // 节流函数执行，声明timer函数，初始timer没有值，return返回一个函数，形成闭包
    function throttle(fun, wait) {
        var timer;
        return function () {
            if (!timer) {   //判断timer是否有值，没有值则给timer赋值，定时器生效
                timer = setTimeout(function () {
                    fun();      //执行fun函数
                    timer = null;   //执行完一个定时器，清除掉
                }, wait)
            }
        }
    }

//获取卷曲的值，并打印出来，封装成函数，存在堆里，等待调用，调用一次，打印一次
    function getScroll() {
        var scrollL = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollR = document.documentElement.scrollTop || document.body.scrollTop;
        console.log(scrollL, scrollR);
    }