Jquery Load more on Scroll Speed

Question

I have a little issue with the following code, it's working fine, however, the only problem is that when someone scrolls down a few times while the data has not been loaded, it creates problems such as it loads the same data twice or it skips some part, etc.. Any help would be greatly appreciated to control the speed of this.

var num = 0;
$(window).scroll(function(){ 
    if ($(window).scrollTop() == $(document).height() - $(window).height()){
        num = num + 20;
            $.get('load_data.php?load=' + num, function(data){ 
                $('#result').append(data);
        }); 
    }
});

Answer 1

A possible solution would be to set a flag on a waypoint.

var flag = false;
var num = 0;
$(window).scroll(function(){ 
    if ($(window).scrollTop() == $(document).height() - $(window).height()){      
        if(!flag){
            num += 20;
            $.get('load_data.php?load=' + num, function(data){ 
                 $('#result').html(data);
                 flag = true;
            });
        }
    }
});

This would only fire the loaded data once. This could be fired at waypoints on specific points on the page.

Answer 2

This solved it.

<script type='text/javascript'>
var num = 0;
var a = 1;
$(window).scroll(function(){ 
if ($(window).scrollTop() == $(document).height() - $(window).height()){

    if (a == 1) {
        a = 2;
        num = num + 20;
                $.get('load_data.php?url=<?php echo $url; ?>&load=' + num, function(data){ 
                        $('#result').append(data);
                         flag = true;
                         a = 1;
                });
    }

}
});
</script>