什么是防抖

函数防抖（debounce） 是指在一定时间内，在动作被连续频繁触发的情况下，动作只会被执行一次，也就是说当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间，所以短时间内的连续动作永远只会触发一次。

代码片段

// 防抖

let timeout;

function debounce(func, wait = 300, immediate = false) {

    // 清除定时器

    if (timeout !== null) clearTimeout(timeout);

    // 立即执行，此类情况一般用不到

    if (immediate) {

        var callNow = !timeout;

        timeout = setTimeout(function() {

            timeout = null;

        }, wait);

        if (callNow) typeof func === 'function' && func();

    } else {

        // 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法

        timeout = setTimeout(function() {

            typeof func === 'function' && func();

        }, wait);

    }

}

什么是节流

函数节流（throttle） 是指一定时间内执行的操作只执行一次，也就是说即预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。

// 节流

let timer, flag;

function throttle(func, wait = 300, immediate = true) {

    if (immediate) {

        if (!flag) {

            flag = true;

            // 如果是立即执行，则在wait毫秒内开始时执行

            typeof func === 'function' && func();

            timer = setTimeout(() => {

                flag = false;

            }, wait);

        }

    } else {

        if (!flag) {

            flag = true

                // 如果是非立即执行，则在wait毫秒内的结束处执行

            timer = setTimeout(() => {

                flag = false

                typeof func === 'function' && func();

            }, wait);

        }

    }

};

 在项目中我们什么时候用到了防抖

当我们进行下拉过多的时候我们使用了防抖

 在vue中我们如何下拉加载更多

1.我们可以写一个方法，在这个方法中，我们可以监听页面的滚动高度

2.如过页面的可视高度+页面的滚动高度>页面的总高度的

   其实他的意思就相当于我们小程序中的触底函数，小程序中是写好的

3.在vue中我们需要通过节流来实现

4.我们可以获取页面的总条数

5.我们可以通过总条数/每页的条数然后向上取值得到我们的总页数

6.如果当前页面数小于总页面就让他的页数进行加1

7.否则的话就显示数据已经加载完毕

8.mouted中调用这个函数

使用防抖的好处

优化性能