using jQuery .load() when user scrolls to the end of page
<p>I  am using jQuery load() to load more content when the user scrolls to bottom of page. Here is my script.</p>

<pre><code>$(window).scroll(function () {
    if ($(window).scrollTop() &gt;= $(document).height() - $(window).height()) {
        var visible_posts = $('.post').length - 1;
        $(".posts").append('&lt;div class="more-content-'+ visible_posts + '"&gt;&lt;/div&gt;');
        $(".more-content-" + visible_posts).html('&lt;div class="loading"&gt;&lt;img src="/img/loading.gif" alt="" /&gt;');
        $(".more-content-" + visible_posts).load('&lt;?php bloginfo('template_directory'); ?&gt;/ajax/get_posts.php?offset=' + visible_posts);
    }
});
</code></pre>

<p>The problem is this creates weird behaviour and many loading gifs if scrolling of user is too quick.. I think because it append the div with loading div every and each time condition is met even before load is done.</p>

<p>Question is:</p>

<p>Is there A way to Stop the script after the first execution .. Run load() ... then re-enable the function ? Something similar to unbind click when you want to disable too fast clicks.</p>

<p>Any idea?</p>
