防抖 & 节流 _原理

防抖:用户操作很频繁,但只执行最后一次。相当于王者荣耀回城,被打断后重新读秒

节流:用户操作很频繁,控制执行次数。相当于王者荣耀的使用技能后等待恢复

1、防抖

//防抖:用户频繁触发,只执行最后一次

<script>
         //获取元素DOM
         const inp = document.querySelector('input');
         //定时器
         let t=null;
         //oninput每次输入时触发事件
         inp.oninput = function(){
                    
                 //每次检测不是空,则清空定时器。又创建新定时器,重新计时
                if(inp.value!==null){ clearTimeout(t) }
                t = setTimeout(()=>{ console.log(this.value) },500)
}
</script>

上面代码。防抖的逻辑和业务功能混在一起了,需要优化为:

//防抖:用户频繁触发,只执行最后一次

<script>
      //获取元素DOM
      const inp = document.querySelector('input');
         
      //oninput每次输入时触发事件
      inp.oninput = debounce( function(){console.log('业务代码在这里设置') , 500} )}

      // fn 是指业务代码,delay是指延迟时间
      function debounce( fn , delay ){
                //定时器
                let t=null;
                //返回一个函数
                return function(){
                 //每次检测不是空,则清空定时器。又创建新定时器,重新计时
                if(inp.value!==null){ clearTimeout(t) }
                t = setTimeout(()=>{ fn.call(this) }, delay)
}
</script>

2、节流

//节流,控制执行次数

let flag = true;
window.onscroll = function(){
    if(flag){
        setTimeout( () = > {
            console.log('业务逻辑代码...')
            flag = true;},500)}
    flag = false;
}

上面代码。节流的逻辑和业务功能混在一起了,需要优化为:

//节流,控制执行次数

let flag = true;
window.onscroll = throttle(function(){...业务逻辑} , delay )

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值