手写函数防抖节流

最新推荐文章于 2025-07-07 17:53:14 发布

weixin_33995481

最新推荐文章于 2025-07-07 17:53:14 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000017860819

本文探讨了在网页开发中，如何优化滚动事件的处理，通过函数节流和函数防抖技术，减少滚动事件处理函数的调用频率，提高用户体验和页面性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM 0级事件

<style>
    .demo{width:200px;height:200px;border:1px solid red;overflow-y:scroll;margin-top:50px;}
    .scroll{height:5000px;}
</style>
</head>
<body>
    <div class="wrap">
        <div id="nothing" class="demo">
            普通滚动
            <div class="scroll"></div>
        </div>
        <div id="throttle" class="demo">
            函数节流
            <div class="scroll"></div>
        </div>
        <div id="debounce" class="demo">
            函数防抖
            <div class="scroll"></div>
        </div>
    </div>
    <script type="text/javascript">
        // 普通滚动
        document.getElementById("nothing").onscroll = function(){
            console.log("普通滚动");
        };

        // 函数节流
        var canRun = true;
        document.getElementById("throttle").onscroll = function(){
            if(!canRun){
                // 判断是否已空闲，如果在执行中，则直接return
                return;
            }

            canRun = false;
            setTimeout(function(){
                console.log("函数节流");
                canRun = true;
            }, 300);
        };

        // 函数防抖
        var timer = false;
        document.getElementById("debounce").onscroll = function(){
            clearTimeout(timer); // 清除未执行的代码，重置回初始化状态

            timer = setTimeout(function(){
                console.log("函数防抖");
            }, 300);
        };            
    </script>
</body>
</html>

DOM 2级事件事件监听

document.addEventListener('scroll', debounce(test, 300))

function test() {
    console.log('函数...')
}

函数防抖（debounce）

function debounce(fn, delay) {
    let timer;
    return function() {
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function() {
            fn.apply(context, args);
        }, delay);
    };
}

函数节流（throttle）

// 方法一：定时器实现
const throttle = function(fn,delay) {
  let timer = null
  return function() {
    const context = this
    let args = arguments
    if(!timer) {
      timer = setTimeout(() => {
        fn.apply(context,args) 
        clearTimeout(timer) 
        timer = null;
      },delay)
    }
  }
}

// 方法二：时间戳
const throttle2 = function(fn, delay) {
  let preTime = Date.now()

  return function() {
      const context = this
      let args = arguments
      let doTime = Date.now()
      if (doTime - preTime >= delay) {
          fn.apply(context, args)
          preTime = Date.now()
      }
  }
}