在每个鼠标滚轮事件后禁用滚动

Question

我做了一个函数来增加一个 li 列表上的类， 有我的代码：

var scrollable = $('ul li').length - 1,
  count = 0;
$('body').bind('mousewheel', function(e) {
  if (e.originalEvent.wheelDelta / 120 > 0) {
    if (scrollable >= count && count > 0) {
      $('.active').removeClass('active').prev().addClass('active');
      count--
    } else {
      return false;
    }
  } else {
    if (scrollable > count) {
      $('.active').removeClass('active').next().addClass('active');
      count++
    } else {
      return false;
    }

  }
})

body{
  overflow:hidden;
  }

ul li {
  height: 20px;
  width: 20px;
  background: blue;
  margin: 5px;
  list-style: none
}
ul li.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

但我想在班级的每次转换之间锁定滚动 1 秒，我该如何解决？

Answer 1

创建一个标志并使用 setTimeout 一秒钟

var scrollable = $('ul li').length - 1,
  count = 0,
  allowTransition = true;
$('body').bind('mousewheel', function(e) {

  if (allowTransition) {
    allowTransition=false;
    if (e.originalEvent.wheelDelta / 120 > 0) {
      if (scrollable >= count && count > 0) {
        $('.active').removeClass('active').prev().addClass('active');
        count--
      } else {
        return false;
      }
    } else {
      if (scrollable > count) {
        $('.active').removeClass('active').next().addClass('active');
        count++
      } else {
        return false;
      }

    }
    setTimeout(function() {
      allowTransition=true;
    }, 1000);
  }
})