向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); 
    });