Question

I have a page that dynamically loads in HTML from a PHP script that scrapes another site for image links when the user scrolls to the bottom of the page. The issue is that it takes awhile for the script to complete and the function that detects that user has scrolled to the bottom of the page gets triggered several times and the HTML is loaded in several times causing duplicate sets of images. Is there a simple way to have javascript wait until the HTML is loaded before letting the function run again? The detection/load script looks like this:

$(window).scroll(function() {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        //alert("at the bottom.");
        $.post("function.php", function(data) {
            $('#wrap').append(data);
            });
    }
});

Thanks!

Answer 1

var loadAgain = true;
$(window).scroll(function() {
    if (loadAgain && $(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        loadAgain = false;
        //alert("at the bottom.");
        $.post("function.php", function(data) {
            $('#wrap').append(data);
            loadAgain = true;
        });
    }
});