JQuery实现防抖节流

用JQuery实现防抖与节流

防抖：
事件触发多次，只执行最后一次
节流：
事件触发多次后，单位时间内只执行一次
引入JQuery：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

想要执行的函数：

 function move(e){
         console.log(2222);
         }

防抖函数：

function debounce(fn){
    var timerID=null
    return function(){
    var arg=arguments[0]   //获取事件
    if(timerID){
    clearTimeout (timerID)
    }
    timerID=setTimeout( function(){
    fn(arg)              //事件传入函数
    },1000)
    }
    }
 $(document).on('wheel',debounce(move))      //本次以鼠标滑动事件为例

节流函数：

  function throttle(fn){
         var timerId=null
         return function(){
         var arg=arguments[0]  //获取事件
         if(timerId){return}
         timerId=setTimeout( function(){
         fn(arg)             //事件传入函数
         timerId=null
         },1000)
         }
         }
         $ (document ).on('wheel',throttle( move))    //本次以鼠标滑动事件为例