手写函数防抖节流

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

摘要生成于 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()
      }
  }
}
### 防抖节流的高阶函数实现 防抖(Debounce)和节流(Throttle)是前端开发中常用的优化技术,用于限制事件触发频率。以下是手写实现防抖节流的高阶函数的示例代码。 #### 手写防抖函数 防抖函数的核心思想是:在指定的时间间隔内,只有最后一次操作会执行目标函数[^2]。 ```javascript function debounce(fn, delay) { let timer = null; return function (...args) { const context = this; if (timer) clearTimeout(timer); timer = setTimeout(() => { fn.apply(context, args); timer = null; }, delay); }; } ``` 上述代码中,`debounce` 函数接收两个参数:目标函数 `fn` 和延迟时间 `delay`。通过 `setTimeout` 实现延迟调用,并在每次触发时清除之前的定时器,确保只有最后一次操作生效[^2]。 #### 手写节流函数 节流函数的核心思想是:在指定的时间间隔内,只允许执行一次目标函数[^3]。 ```javascript function throttle(fn, limit) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); const context = this; if (now - lastCall >= limit) { fn.apply(context, args); lastCall = now; } }; } ``` 上述代码中,`throttle` 函数接收两个参数:目标函数 `fn` 和时间间隔 `limit`。通过记录上一次调用的时间戳 `lastCall`,判断是否满足时间间隔条件,从而控制函数的执行频率[^3]。 #### 示例应用 以下是一个简单的使用场景,展示如何将防抖节流应用于输入框和页面滚动事件。 ##### 输入框搜索优化(防抖) ```javascript const inputEl = document.querySelector('input'); inputEl.addEventListener('input', debounce(function () { console.log("发送网络请求", this.value); }, 1000)); ``` ##### 页面滚动效果优化(节流) ```javascript window.addEventListener('scroll', throttle(function () { console.log("当前距离顶部的距离:", window.scrollY); }, 1000)); ``` ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值