JQuery实现防抖节流

关注

原创最新推荐文章于 2026-07-21 13:19:15 发布 4.1k 阅读 AI 写同款· GEO 优化 ›

ajax - 终结篇jsonp，防抖节流 Python微信订餐小程序课程视频 https://blog.youkuaiyun.com/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.youkuaiyun.com/m0_56069948/article/details/122285941 今天是我们最后一天ajax的学习，这次学完总可以去vue了吧，我不信还有什么拦路石，先不说其他的先看看今天的内容。首先是同源策略，什么叫做同源？如果两个页面的协议、域名、端口都相同的话，我们将阅读详情

用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))    //本次以鼠标滑动事件为例

收录于