javascript - removeEventListener 似乎不起作用？

Question

由于某种原因，我需要在滚动页面结束时延迟点击并阻止Default一段时间。所以我写了这样的内容:

// const disableClickDuringScrollHandler=(e)=> {
//      e.preventDefault();
//    };
this.scrollHandler = e => {
  console.log('scrolling');
  const disableClickDuringScrollHandler = (e) => {
    e.preventDefault();
  };
  document.addEventListener('click', disableClickDuringScrollHandler);
  window.clearTimeout(this.scrollTimer);
  this.scrollTimer = window.setTimeout(() => {
    console.log('scroll end');
    document.removeEventListener('click', disableClickDuringScrollHandler);
  }, 300);
}
window.addEventListener('scroll', this.scrollHandler);

我也写过codepen:https://codepen.io/zhangolve/pen/gRNMoX

我的问题是，当我将disableClickDuringScrollHandler放在scrollHandler之外时，removeEventListener可以很好地工作，但是当我将disableClickDuringScrollHandler放在scrollHandler内部时，removeEventListener似乎不起作用。

我已经尝试了很多次来找出原因，但都失败了。所以我来这里寻求你的帮助。

Answer 1

问题是，每次用户滚动时，您都会创建一个新的 disableClicksDuringScroll 闭包并将其添加为点击监听器。当此计时器运行时，它会删除最新的点击监听器，但不会删除之前的点击监听器(因为它们是不同的闭包，因此它们不等于您这次删除的函数)。

您应该在 scroll 处理程序外部定义 disableClicksDuringScroll 函数一次，因为它不引用此处的任何局部变量。然后，当您调用 removeEventListener 时，它将找到此处理程序。

您还可以使用变量，这样您只需在滚动开始时添加一次点击监听器，而不是每次重置计时器时添加一次。

this.disableClickDuringScrollHandler = (e) => {
  e.preventDefault();
};

this.inScroll = false;

this.scrollHandler = e => {
  console.log('scrolling');
  if (!this.inScroll) {
    document.addEventListener('click', this.disableClickDuringScrollHandler);
    this.inScroll = true;
  }
  window.clearTimeout(this.scrollTimer);
  this.scrollTimer = window.setTimeout(() => {
    this.inScroll = false;
    console.log('scroll end');
    document.removeEventListener('click', disableClickDuringScrollHandler);
  }, 300);
}
window.addEventListener('scroll', this.scrollHandler);