讲解vue中使用防抖，节流

防抖

防抖：所谓的防抖, 其实就是在固定时间内反复触发函数, 只有最后一次函数能够被执行 如果重新触发了函数, 将会重新计时。使用场景：在进行搜索的时候，当用户停止输入后调用方法，节约请求资源。
操作：我们可以借助setTimeout来做一个简单的实现，每次点击都会判断是否是当前定时器，如果是的话就清除掉。

  	data:{
           times: '',
        },
        methods: {
            extract() {
                this.debounce(this.handle, 1000)
            },
            debounce(fn, delay) {
                if (this.times) clearTimeout(this.times)
                this.times = setTimeout(() => {
                    fn()
                }, delay);
            },
            handle() {
                console.log("执行了······")
            },
        }

节流

节流:节流不是不让函数触发, 而是减少函数触发的频率 ，就是说在固定时间内, 函数只能执行一次，在某个时间段内暂时失效，过了这段时间后再重新激活（类似于技能冷却时间）

操作：我们可以借助setTimeout来做一个简单的实现，加上一个状态位valid来表示当前函数是否处于工作状态。

	data(){
		return{
			valid:false
		}
	},
    methods: {
        extract() {
            this.throttle(this.handle, 1000)
        },
        throttle(fn, wait) {
            if (!this.valid) {
            //(通行令不正确，不许进)判读如果不是false点击的话就返回一个false，并且不在向下执行。
                return false
            }
            //这里写要执行的任务，当你设置的这个到了之后，便会执行你所定义的方法。
            this.valid = false
            setTimeout(() => {
                this.valid = true
                this.handle()
            }, wait)
        },
        //实现对应的逻辑
        handle() {
            console.log('执行完毕······')
        },
    }    

防抖和节流严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要掌握的。