jQuery scroll not working properly

In my html page ther is one load-more class.<p class="load-more">Load more</p>. When user scroll down to this div i need to execute a function . For example i need to alert "Hi". For this i used the following code .

$(window).scroll(function() {
    var hT = $(".load-more").offset().top,
        hH = $(".load-more").outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    if (wS > (hT+hH-wH)){
        alert("Hi");
    }
});

But here alert is working more than one time . Ie alert is repeating 4,5 times . Why this is happening ? i see this answer Run jQuery event only once after a condition matches but it is not working .

Please see this js fiddle https://jsfiddle.net/4cfjq1tg/2/. Here when we scroll down to bottom , it is alerting hi more than one time .

Here what i need is      

how can i execute some function on certain condition ? for example when scroll down to load more then i need to check the css display value of .load-more. If that load-more is display block alert Hi . else don't do anything

UPDATE

I solve this issue using this solution

var in= 0;

$(window).scroll(function(e) {
    var hT = $(".load-more").offset().top,
        hH = $(".load-more").outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
   if(in==0){
     if (wS > (hT+hH-wH)){
       if($(".load-modre").css("display")!=="block"){
             alert("hii");
             in ++;
            }
            }  } 

    });

All credits are going to FFdeveloper and Farzin Kanzi .

Thank you friends