关于防抖的问题

Question

这里这个argments是fn的argments吗，怎么传过来的？

// 防抖动函数
function debounce(fn,wait=50,immediate) {
    let timer;
    return function() {
        if(immediate) {
            fn.apply(this,arguments)
        }
        if(timer) clearTimeout(timer)
        timer = setTimeout(()=> {
            fn.apply(this,arguments)
        },wait)
    }
}

Answer 1

这个防抖函数不是return function(){....}有这一步吗?这就是返回一个函数,就是通过调用这个函数进行事件其他操作的.

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

// 实际执行内容
function handleInput(params) {
  // 不传参这里相当于e对象,传参这里就是接收参数的
  console.log(params);
}

const search = document.querySelector("input");

/* 不传参操作
search.addEventListener("input", debounce(handleInput, 1000));
*/

// 传参操作
const inputFn = debounce(handleInput, 1000);
search.addEventListener("input", () => {
  inputFn("Hello,World");
});

Answer 2

是，也不是。其实是里面那个匿名函数的，然后再原样传给 fn。

// 简化一下多余的，这么看应该更容易理解

function wrap(fn) {
    return function() {
         fn.apply(this, arguments);
    }
}

let oldFunc = function() {};
let newFunc = wrap(oldFunc); // 此时得到的是内部的匿名函数了
newFunc(0, 1, 2);

Answer 3

debounce防抖函数调用后返回一个新函数，这个arguments就是传给这个匿名函数的参数列表，里面那个箭头函数里的arguments和上面的argumenst都是同一个函数的参数，因为箭头函数是没有arguments对象的。至于怎么传过来，你可以调用debounce后再调用一次自己传入，或者替换某个方法的回调函数，接收回调的默认参数。

// 防抖动函数
function debounce(fn,wait=50,immediate) {
    let timer;
    return function(a, b, c) {
        // 这个arguments实际上就相当于args的类数组对象。
        // var args = [a, b, c];
        if(immediate) {
            fn.apply(this,arguments/* args */)
        }
        if(timer) clearTimeout(timer)
        timer = setTimeout(()=> {
            fn.apply(this,arguments/* args */)
        },wait)
    }
}