关于防抖的问题

张长长
  • 35

这里这个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)
    }
}
回复
阅读 455
3 个回答

这个防抖函数不是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");
});

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

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

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

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

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)
    }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏