关于前端防抖的疑问和理解

最新推荐文章于 2025-09-19 16:04:50 发布

原创最新推荐文章于 2025-09-19 16:04:50 发布 · 464 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

本文探讨前端防抖(debounce)技术，用于限制事件处理函数的执行频率，避免因用户频繁操作导致的性能问题。通过设置定时器，防抖函数在指定时间内多次触发时仅执行最后一次。同时，文章提出了关于apply函数在防抖中作用的理解，并分析了事件回调函数作为参数时，不同调用方式导致的不同执行行为。

关于前端防抖的疑问和理解

防抖

防抖简单来说就是为了防止前端界面用户频繁点击 button 按钮之后频繁发送 ajax 请求或者造成的事件阻塞。

解决思路：利用定时器，当用户点击 button 之后在某个时间（如：500 毫秒）之内再次点击 button 时，就清除定时器，重新计时。

执行代码

function fn(a) {
  console.log("被点击了！！");
}

function debounce(fn, delay) {
  var timer = null; // 声明计时器
  console.log(this, arguments);
  return function () {
    var context = this;
    var args = arguments;
    console.log(this, arguments);
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

// 绑定事件时：如果只是函数名fun，则事件执行之后才执行，
//如果为fun()传参数，事件创建时会执行fun，但是事件执行时会调用fun的回调return
document.getElementById("button").addEventListener("click", debounce(fn, 500));

几个问题

关于防抖函数中的 apply()函数，这个不是很好解释，建议结合MDN 社区上的 call()函数一起理解。

一个事件回调的问题(没有想明白，求大佬解释)

function fun(a) {
  console.log("fun1");
  return function () {
    console.log("fun2");
  };
}

//回调函数为fun的时候，点击之后会执行fun,并且输出fun1, 但是fun的return之后的函数不会执行
document.getElementById("button").addEventListener("click", fun);

//回调函数为fun()的时候，页面加载的时候会输出fun1，但是点击之后才会执行return之后的function(){}
document.getElementById("button").addEventListener("click", fun(1));