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

Question

老师没有单独写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);
  }
}

Answer 1

双越 2023-06-01 15:33:36

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

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

• 提问者 慕的地4574108 #1

  谢谢双越老师。您这么一说我console.log了一下，确实是这样。可是为什么会只执行一次啊，这一行代码也在函数内啊，多次触发事件，这个对应的函数应该也多次触发，可是为什么内部第一行timer赋值为null只执行一次啊。

• 双越 回复 提问者 慕的地4574108 #2

  这是代码逻辑的问题。因为里面的方法已经 return 出来了。

• 蛋宝啊 #3

  老师我想问下，debouce是在keyup的时候才会触发的，为什么已进入页面就执行了debouce方法，就是timer = null 在进入页面的时候就被初始化了，而不是在第一次keyup的时候呢？

点开查看后面3条评论