向DOMMouseScroll事件添加延迟

Question

我有一些应该在用户滚动后出现的div。所以我跟踪mouseScroll事件。但我想为我的活动增加一些延迟。我试图使用setTimeout，但它并没有帮助...如果我做了一个完整的滚动滚动（每个行为多于一个），除了删除我的课程.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); 
    });