防抖 & 节流 _原理

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

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

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