vue的防抖和节流

什么是防抖和节流？如何实现防抖和节流？

防抖（Debounce）和节流（Throttle）都是用来控制某个函数在一定时间内触发次数，两者都是为了减少触发频率，以便提高性能或者说避免资源浪费。

防抖

防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

举个例子：

就是你英雄联盟回城需要6秒，如果中间你又按了一次回城，那6秒就得重新计算。

<input @keyup="sends(list)"  />

data(){
	  return {
		  timeout:null
	  }
	 
  },
 methods:{

   debounce(fn,item){
  //先判断定义的变量是不是没有被赋值定时器，
	  if(this.timeout !== null) {
        //如果被赋值了就清除定时器
	    	clearTimeout(this.timeout)
	  };
	   this.timeout = setTimeout(()=>{
	    	fn()
	   },item)
    },
    sends(){
    //封装里面第一个值接收的是一个函数，所以这里就得传一个函数
	  this.debounce(()=>{
		  console.log("防抖被调用了")
		},3000)
	  }
}

节流

节流就是指连续触发事件但是在 n 秒中只执行一次函数。

<input @keyup="sends(list)"/>
data(){
	  return {
		  canUse:true
	  }
methods:{
	    debounce(fn,item){
		     //如果为true，就触发技能，否则就不能触发
		       if(this.canUse){
		           //触发技能后，关闭开关
				   fn()
		           this.canUse = false
		           //在3秒后打开开关
		           setTimeout(()=>this.canUse = true, item)
		       }
		},
	  sends(){
		  this.debounce(()=>{
				 console.log(this)
		  },3000)
	  }
  }