防抖和节流操作

防抖

防抖操作，我的理解就是，第一次触发事件时，不立即执行操作，设置一个n秒的期限，如果n秒内没有再次触发这个事件，就执行函数；如果n秒内再次触发了事件，则将计时器清零重新开始计时，直到计时器达到n秒，才执行函数。
这样就达到了短时间内多次触发同一个事件，只会执行一次函数的效果。
实现：

<button type="primary" @click="clickHandler(2)">提交</button>

export default {
	data(){
		return {
			clickHandler:null,//防抖操作
		}
	},
	created:function(){
		//this.save是需要被触发的事件，注意不能写成this.save();
		this.clickHandler = this.debounce(this.save, 1000)
	},
	methods: {
		//防抖操作函数
		debounce(fn,wait) {				
		    let timer = null;				
		    return function(...args) {   
		        if(timer)   clearTimeout(timer);        
		        timer = setTimeout(()=>{
					fn.apply(this,args)
				},wait);
		    }
		},
		save:function(type) {
			//触发事件
		}
	}
}

节流

节流操作就像一个类似控制的阀门，我们只需要控制在时间间隔后开启关闭。对于短时间内触发事件，节流目的想让触发回调函数的频率降低,在某一时间内回调函数是失效状态。

function throttle(fn, delay) {
     let valid = true//有效的
      return function() {
          if(!valid) {
              return false
          }else {
              //工作完后变为 无效
              valid = false
              //在一定的时间段变为工作状态
              setTimeout(() => {
                  fn();
                  valid = true;
              }, delay)
          }
      }
  }
    ```