javascript - 带有 setTimeout 的 if/else 语句导致闪烁

Question

我在向下滚动时显示一个元素并在再次向上滚动时隐藏它。在不使用 setTimeout 的情况下，这会按预期工作。但是，使用 setTimeout 会导致在向下滚动时以较短的时间间隔添加和删除“显示”类。如何在保持延迟的同时避免这种情况？

onscroll = function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 110) {
    menuButton.classList.add('display');
  } else {
    setTimeout(function() {
      menuButton.classList.remove('display');
    }, 400);
  }
}

Answer 1

超时仍在从较早的事件中触发。这是我的修复:

onscroll = function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  var timer;
  if (scrollTop > 110) {
    window.clearTimeout(timer);
    menuButton.classList.add('display');
  } else {
    timer = window.setTimeout(function() {
          menuButton.classList.remove('display');
      }, 400);
  }
}