javascript - 停止滚动功能排队

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

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

如果事件在前一个超时到期之前触发，我会取消前一个超时。并且超时实际上触发了操作。因此，紧随其后发生的一系列类似事件将被静音并被丢弃。

我主要将其用于窗口调整大小事件，但它也可能适用于此处。纯 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 的包装“类”，它可以让做这种事情变得更干净)