每次出发debounce时候,第一个timer赋值成null,为什么不会导致if永远不执行。

来源:16-8 手写防抖 debounce

慕的地4574108

2023-06-01

老师没有单独写debounce的时候我还能理解,因为timer在外面。
比如输入123. 因为外部timer是null,所以输入1时跳过if,走到timer赋值为setTimeout。输入2时,因为timer被赋值了,所以执行cleaTimeout,然后重新给timer新赋值一个setTimeout,一直到最后一个,才会执行到setTimeout内部的回调函数。

可是单独写了debounce以后,timer是写在debounce内部的,那么每次‘keyup’执行debounce时候,那么不应该先执行let timer = null吗?

还是上面那个例子。
比如输入123. 输入1时,执行debounce函数,timer是null,所以if不执行,直接走到timer=setTimeout。回调还没来得及执行时,输入2,那么再一次执行debounce函数。
timer再一次赋值为null,if还是不执行,在给timer赋值为setTimeout。那么如此,if一直不执行还有什么存在的必要吗?

function debounce(fn, delay = 500) {
  *****let timer = null;*****

  return function() {
    if (timer) {
      clearTimeout(timer);
    }

    timer = setTimeout(() => {
      fn.apply(this, arguments);
      timer = null;
    }, delay);
    //形成闭包,引用了外部的timer,timer不会被销毁
  }
}
input1.addEventListener('keyup', debounce(function () {
  console.log(input1.value);
}),600);

对于节流我也是一样的问题。如果反复触发throttle,那么timer开始为null,不走if,然后再赋值为setTimeout,再拖拽,又一次出发throttle,timer又为null,那if不应该被执行啊。
原谅我的蠢问题,但是这块真有点想不通,希望老师和各位同学能看到,帮忙解答一下。谢谢各位

function throttle(fn, delay = 100) {
  let timer = null

  return function () {
    if(timer){
      return
    }

    timer = setTimeout(() => {
      fn.apply(this, arguments);
      timer = null
    }, delay);
  }
}
写回答

1回答

双越

2023-06-01

因为 timer = null 只是一开始的时候初始化了一下,只执行了一次。

而后面 timer 又赋值了其他值,再走 if 就可以正常通过了。

0
6
蛋宝啊
回复
双越
明白了 谢谢老师
2023-11-07
共6条回复

一天时间高效准备前端技术一面 匹配大厂面试要求

针对时下面试高频考点,帮助新人js面试快速通关

4694 学习 · 1681 问题

查看课程