停止滚动功能排队

Question

我用 javascript 为我正在使用的网站创建了一个滚动系统，但我在排队所有输入时遇到了一些问题。

这是我的问题示例，尝试滚动，您会看到问题所在。 http://fadedmeadows.com/test/

var index = 0;
var scroll2 = true;
$(document).ready(function() {
  $("#home").css({
    "color": "#eb0e0e",
  });
});

$(window).bind('mousewheel DOMMouseScroll touchmove', function(event) {
  scroll2 = true;
  if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
    // scroll up
    if (index > 4) index = 4;

    if (index == 4 && scroll2 == true) {
      $('html, body').animate({
        scrollTop: $("#content3").offset().top
      }, 1000);
      index--;
      scroll2 = false;
    }
    if (index == 3 && scroll2 == true) {
      $('html, body').animate({
        scrollTop: $("#content2").offset().top
      }, 1000);
      index--;
      scroll2 = false;
    }
    if (index == 2 && scroll2 == true) {
      $('html, body').animate({
        scrollTop: $("#content").offset().top
      }, 1000);
      index--;
      scroll2 = false;
    }
    if (index == 1 && scroll2 == true) {
      $('html, body').animate({
        scrollTop: $("header").offset().top
      }, 1000);
      index--;
      scroll2 = false;
    }
  } else {
    // scroll down
    if (index < 0) index = 0;
    if (index == 0 && scroll2 == true) {
      $('html, body').animate({
        scrollTop: $("#content").offset().top
      }, 1000);
      index++;
      scroll2 = false;
    }
    if (index == 1 && scroll2 == true) {
      $('html, body').animate({
        scrollTop: $("#content2").offset().top
      }, 1000);
      index++;
      scroll2 = false;
    }
    if (index == 2 && scroll2 == true) {
      $('html, body').animate({
        scrollTop: $("#content3").offset().top
      }, 1000);
      index++;
      scroll2 = false;
    }
    if (index == 3 && scroll2 == true) {
      $('html, body').animate({
        scrollTop: $("#content4").offset().top
      }, 1000);
      index++;
      scroll2 = false;
    }
  }
});

Answer 1

不确定这是否对您有帮助，但我有一个实际事件的侦听器，它会在收到事件时设置超时。

如果事件在前一个超时到期之前触发，我将取消前一个。超时实际上触发了动作。因此，紧接着发生的一连串类似事件将被静音并丢弃。

我主要将其用于 window 调整大小事件，但它也可能适用于此。纯 js 代码可能如下所示：

var resizeTimeout = null, wait = 200;
window.onresize = function(){
  if (resizeTimeout !== null) {
    window.clearTimeout(resizeTimeout);
    resizeTimeout = null;
  }
  resizeTimeout = setTimeout(function(){
    //do whatever is needed to deal with window resize.
  }, wait);
}

（但我有一个名为 Timer 的包装器 "class"，它使做这种事情更干净一些）

停止滚动功能排队

Stop scroll function from queing up

javascript

scroll