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)
	  }
  }

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue防抖节流是两种常用的优化方式,用于限制函数被频繁触发的次数。 1. 防抖(Debouncing):在一段时间内,多次触发同一个函数,只执行最后一次触发,可以避免函数过于频繁执行。 防抖常用场景:输入框搜索联想、页面滚动等。 使用方法:可以使用lodash库的`debounce`函数或自定义防抖函数。 实现原理:设置一个定时器,在函数被触发时先清除之前的定时器,然后重新设置定时器,当定时器到达时间后执行函数。 2. 节流(Throttling):在一段时间内,多次触发同一个函数,按照指定的间隔时间执行函数,可以减少函数的执行次数。 节流常用场景:滚动条下拉刷新、窗口resize等。 使用方法:可以使用lodash库的`throttle`函数或自定义节流函数。 实现原理:设置一个定时器,在函数被触发时判断是否已经达到指定的间隔时间,如果是则执行函数并重置定时器,如果未达到则不执行。 防抖节流都可以通过设置时间间隔来调整触发的频率。在vue中,可以将防抖节流函数绑定到事件触发的回调函数上,以实现优化。这些函数在vue的指令(`v-on`)中应用广泛,例如: ``` <input v-model="keyword" v-on:input="debounceSearch"> ``` 在这个例子中,`debounceSearch`函数会在用户输入时触发,但是只有在用户输入停止一段时间后才会执行搜索操作,以避免输入过程中频繁执行搜索的情况发生。 总之,防抖节流vue中常用的函数优化方式,能够有效控制函数执行的频率,提升用户体验和页面性能。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值