javascript - 为 DOMMouseScroll 事件添加延迟

Question

我有一些应该在用户滚动后出现的 div。所以我跟踪 mouseScroll 事件。但我想为我的事件添加一些延迟。我尝试使用 setTimeout 但它没有帮助......如果我做一个完整的轮子滚动(每个 Action 超过一个)，除了删除我的类 .shown< 之外我什么也得不到。我应该怎么办？这是我的代码:

$(document).ready(function() {
  var timer;
  var delay = 1000;

  $(window).bind('mousewheel DOMMouseScroll', function(event) {
    var shown = $(".shown").removeClass('shown');
    timer = setTimeout(function() {
      if (event.originalEvent.wheelDelta > 14 || event.originalEvent.detail < 14) {
        // scroll up
        if (shown.next() && shown.next().length) {
          shown.next().addClass('shown');
        } else {
          shown.siblings(":first").addClass('shown');
        }
      } else {
        // scroll down
        if (shown.next() && shown.next().length) {
          shown.next().addClass('shown');

        } else {
          shown.siblings(":first").addClass('shown');
        }
      }
    }, delay);
  }, function() {
    clearTimeout(timer);
  });
});

.view {
  width: 300px;
  height: 20px;
  display: none;
  clear: both;
  transition: opacity 1s ease-out;
  opacity: 0;
}
#first {
  background: grey;
}
#second {
  background: red;
}
#third {
  background: blue;
}
#fourth {
  background: orange;
}
#fifth {
  background: green;
}
.view.shown {
  display: block;
  opacity: 1;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<div class="view shown" id="first"></div>
<div class="view" id="second"></div>
<div class="view" id="third"></div>
<div class="view" id="fourth"></div>
<div class="view" id="fifth"></div>

不幸的是，我也不知道如何以相同的延迟反转这个脚本。任何帮助将不胜感激!

Answer 1

尝试使用:

  $(window).bind('mousewheel DOMMouseScroll', function(event) {
    var shown = $(".shown").removeClass('shown');
    clearTimeout(timer);
    timer = setTimeout(function() {
      if (event.originalEvent.wheelDelta > 14 || event.originalEvent.detail < 14) {
        // scroll up
        if (shown.next() && shown.next().length) {
          shown.next().addClass('shown');
        } else {
          shown.siblings(":first").addClass('shown');
        }
      } else {
        // scroll down
        if (shown.next() && shown.next().length) {
          shown.next().addClass('shown');

        } else {
          shown.siblings(":first").addClass('shown');
        }
      }
    }, delay);
  });