jQuery infinite scroll in a DIV scroll event fires more than once

Question

i want to implement the infinite scroll technique just in a div not the whole body, i have googled it and i found an answer this is the link but this solution fires more than once, which causes more than one load !! this is my mark up !!

<div id="articlesContainer" class="container-fluid">
   <div id="sideBarArticles" class=" col-md-3">
       //..sidebar goes here
   </div>
   <div id="articleInfinte" class="col-md-9">
       <div class="article">
         //..title.. content goes here
       </div>
   </div>
</div>

Js

   $("#articleInfinte").scroll(function(){
        if($('#articleInfinte').scrollTop() + $('#articleInfinte').outerHeight() >=        $('#articleInfinte')[0].scrollHeight){
             //Loading data...
             $('#articleInfinte').append(data);
         }

Answer 1

You'll need to use a debounce like approach. Basically, after data is appended set a variable for a second or two and check for that in your if. If it exists don't append the data.