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

Question

我在向下滚动时显示一个元素，在再次向上滚动时隐藏它。在不使用setTimeout的情况下，它可以像预期的那样工作。然而，使用setTimeout会导致'display'类在向下滚动时以很短的间隔添加和删除。我怎样才能在保持延迟的同时避免这种情况呢?

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);
  }
}

Answer 2

您必须在setTimeout执行该函数后检查滚动位置。超时后可以是不同的。

编辑:如果你不希望超时被触发多次，你可以用clearTimeout清除它。

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