JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://nhuja.com/random/jquery.mousewheel.min.js"></script>
<div id="test">
    <div id="child">show something</div>
</div>

CSS

#test {
     width: 300px;
     height: 300px; 
     border: 1px solid red;  
}

JavaScript

var i=0;
    $("#test").mousewheel(function(event, delta) {
    event.preventDefault();
    clearTimeout($.data(this, 'timer'));        

    // check if the mouse moved on right/up
    if( delta > 0 ) {               
        i++;                

        // hack to execute function just once
        if( i == 2 ) {                  
            $('#child').fadeIn().html("show previous").fadeOut();  // do something once when i=4, but happening multiple times
        }           

    } else { // check if mouse moved left/down

        i--;   

        if(i==-2) {     
            $('#child').fadeIn().html("show next").fadeOut();  // do something once when i=-4, but happening multiple times
        }               

    } // end if delta

    // only execute another mousewheel scroll after some delay
    $.data(this, 'timer', setTimeout(function() {
        i = 0;
        $('#child').fadeIn().html("showing...")
    }, 110));

});