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

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

防抖

防抖简单来说就是为了防止前端界面用户频繁点击 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));

几个问题

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

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

   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));
   

   我的问题：为什么当事件回调函数为 fun 时，事件执行时，执行的是 fun 函数 return 上面的部分。而当事件回调函数为 fun()时，return 上面的代码会在页面加载的时候就执行，而 return 后面的 function 函数会在事件(click)执行的时候才执行。求解！！！！