◎マウスホイールが一度回された時に、一度だけ処理し、
再度回すとまた処理するというものを作りたいです。

「jquery.mousewheel.js」というプラグインを使っています。

下のコードだと、大きくホイールを回すと、複数回'mousewheel'イベントが呼ばれてしまいます。

mousewheelイベントが発生した直後に

.off("mousewheel")

としているのですが、mousewheelイベント自体の発生を止めるものではないのですかね。

◎なぜtrue／falseのフラグたと処理をスルーできないのかの理由も教えていただけますと幸いです。

$(function(){

 var timer;
 var index = 0;
 var delay = 1000; //次のスクロールを許容する時間
 var boxes = $('.box');

 //ホイールイベントを検知
 $(document).on('mousewheel', function(eo, delta, deltaX, deltaY){
  console.log('mousewheel');
  count(eo, delta)
 });

 //関数の定義
 function count(eo, delta){
  if (delta === -1){
    $(document).off("mousewheel")//ホイールの検知を中止
    console.log('下');
    index = index + 1
    if (index >= boxes.length-1) {
     index = boxes.length-1
    }
    changeBox(index);
    timer = setInterval(allowCount, delay);
  }

  if (delta === 1) {
    $(document).off("mousewheel")//ホイールの検知を中止
    console.log('上');
    index = index - 1
    if (index < 0) {
     index = 0
    }
    changeBox(index);
    timer = setInterval(allowCount, delay);
  }

  function allowCount() {
   console.log('go!');

   //ホイールを検知の再登録
   $(document).on("mousewheel",function(eo, delta, deltaX, deltaY){
    console.log('mousewheel');
    count(eo, delta)
   })
   clearInterval(timer)
  }
 }

 function changeBox(index) {
  var cur = $('.effect');
  cur.removeClass('effect');
  boxes.eq(index).addClass('effect');
 }
});
@charset "UTF-8";
*{
 padding:0;
 margin:0;
}

html,body{
 width:100%;
 height:100%;
 overflow: hidden;
}


.container{
 height: 100%;
 display:grid;
 grid-auto-rows: 50px;
 grid-template-columns: 80%;
 justify-content: center;
 grid-gap: 5px;
}

.box{
 background: pink;
}

.effect{
 opacity: 0.5;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script src="scripts.js"></script>
</head>
<body>
 <div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
 </div>
</body>