什么是函数防抖和函数节流

防抖（debounce）和节流（throttle）都是用来控制某个函数在一定时间内执行多少次的技巧，两者相似不相同，基本思想都是某些代码不可以在没有间断的情况下连续重复执行

• 函数防抖

如果一个事件被频繁执行多次，并且触发的时间间隔过短，则防抖函数可以使得对应的事件处理函数，只执行最后触发的一次。函数防抖可以把多个顺序的调用合并成一次。

• 函数节流

如果一个事件被频繁触发多次，节流函数可以按照固定的频率去执行相应的事件处理方法。函数节流保证一个事件一定时间内只能执行一次。

函数防抖应用场景

• 搜索框输入（只需要最后一次输入完成后再放松Ajax请求）
• 滚动事件scroll（只需要执行触发的最后一次滚动事件的处理程序）
• 文本输入的验证（连续输入文字后发送Ajax请求进行验证，停止输入后验证一次）

在工具类中定义函数防抖

/**
 * 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true=立即执行(执行第一次)，false=非立即执行(执行最后一次)
 */
function debounce(func, wait=100, immediate=false) {
    //只会初始化时执行一次
    var timeout;
    //此函数每次触发调用
    return function () {
        var context = this;
        var args = arguments;
        //多次触发则清除上一个定时器
        if (timeout) clearTimeout(timeout);
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(function () {
                timeout = null;
            }, wait);
            if (callNow) func.apply(context, args)
        }
        else {
            timeout = setTimeout(function () {
                func.apply(context, args)
            }, wait);
        }
    }
}

在method中使用

    methods: {
        testFun: function(searchValue) {
            this.$emit('search', searchValue);
        },
        /**
         * 触发确认搜索事件
         */
        emitSearchEvent: function(searchValue) {
            //使用函数防抖提交搜索事件，短时间内多次触发仅提交最后一次
            //调用函数防抖的同时传入一个方法和间隔时间（传入的方法不带括号表示直接把函数本身传入，如果带有括号则表示直接执行函数）
            //此处写法相当于只声明一次防抖函数
            this.searchDebounceFun = this.searchDebounceFun || debounce(this.testFun, 200);
            //调用函数防抖，可传入参数
            this.searchDebounceFun(searchValue);
        },
    },