Jquery strong>出现滚动

JQuery文档：

只要元素的滚动位置发生变化，就会发送滚动事件， 不管什么原因。在滚动条上单击或拖动鼠标， 在元素内部拖动、按箭头键或使用 鼠标滚轮可能导致此事件

现在，您的脚本的任务是进行一次AJAX调用来检查是否有要加载的内容。您需要修改脚本，以阻止在此期间发生多个AJAX调用，正如我看到的

@E.J.Brennan

已经提出了相同的建议：）

您可以按如下方式添加标志：

---

你是否试图实现Facebook的延迟加载，即用户向下滚动时加载上一篇文章？是的。我实现了这一点，但有时（只是在mozzila中，而不是在chrome中）滚动器仍位于div的底部，这将导致许多ajax调用。你能改进代码中的注释吗。它会吸引更多的眼球……）谢谢不确定scroll事件处理程序中发生了什么…scroll程序究竟何时保留在DIV#scrollbox的底部？是在没有更多数据要加载的时候吗？Kent Pawar真的很感谢你的帮助。。代码更新感谢您的回答。很抱歉不清楚，因为它确实很难解释。我很快会尝试使用它。+1用于使用处理程序存储标志。更新了问题的标题以澄清所面临的实际问题。@E.J.Brennan您能更清楚地说明如何在我的脚本中防止多个ajax调用吗？我不知道该在哪里执行放置标记E.J.Brennan的建议并没有解决这个问题。我认为firefox的问题是在本地主机区域速度太快。速度太快会导致加载数据时这个滚动条不会到达顶部，而是停留在div的底部。真的非常感谢和+1您的帮助，但使用标记并没有什么乐趣。但也许我对标记做了一些错误的事情。我不知道know@HiDd3N由于不同的浏览器触发滚动事件的方式不同，因此肯定需要使用不同的标志。您可以再次更新您的代码…谢谢：）我为滚动功能添加了行，但添加此行后没有ajax调用表示欢迎。data（）是一个JQuery事件处理程序。它可以用于附加/存储任何DOM对象的数据。这里已经解释了->请不要做；请参见顶部的拒绝原因，了解原因，但通常不会改变作者的意图。你应该评论作者，指出这些东西，并给作者第一次机会进行编辑。

    $(window).scroll(function () {

    //if last scroll is not done, don't start another one.
    if ($(window).data('ajaxready') === false)
        return;

    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
        $(window).data('ajaxready', false);  //prevent more scroll events
        YourFunctionCallToGetGetMoreData();  //go get the data here.
    }

    //turn scrolling events back on
    $(window).data('ajaxready', true);
});

//listen to scroll function
  $('#scrollbox').scroll(function(){

        //[Kent] Before we service the event, we check if the last scroll event was handled/completed.
        //If it is not yet compelted, don't start another one and jump out of the code.
        if ($(window).data('ajax_in_progress') === true)
            return;

        //define what we need
        var scrolltop=$('#scrollbox').attr('scrollTop');
        var scrollheight=$('#scrollbox').attr('scrollHeight');
        var windowheight=$('#scrollbox').attr('clientHeight');
        var scrolloffset=20;

        //get number of div which will append to script in case of limit database to page 2 or 3 or...
        size =  $('#content > div').children().size();

        //if we reach to bottom of div we are going to call to ajax function
        if(scrolltop>=(scrollheight-(windowheight+scrolloffset))){
            $(window).data('ajax_in_progress', true);  //[Kent] prevent more scroll events as AJAX request will soon begin. 

            var form_data = $('#formdata').val();

            // if remain of size(count of div) is 0 then we have more data to show because 
            // we limit data provided by script to 7 field(we handle situation that we had 
            // 14 or 21 respond from database in "next step" because if there is no data to 
            // show we dont have to let script to run)
            if(size % 7 == 0){
                //call to load data function
                setTimeout(function(){loaddata(form_data, size)}, 1500);
            }else{
                //do nothing its just in case we need to append something like no more data to load
            }
        }
    });    



//function to load data
function loaddata(form_data, size){
    number = "&size=" + size;
    //fetch new items
    $.post('dosearch.php', form_data+number, function(newitems){
        // [Kent] This is the callback funciton that gets executed ONLY
        // when the AJAX request has completed. We will append the data
        // into the DOM and then reset the FLAG.

        //next step : if page echoing "" then do nothing
        if(newitems == ''){
        }else{
            //if we have data append these data to our div's #content
            $('#content').append(newitems).each(function() {
                //Adding a callback to append.
                // So we reset the flags here to indicate the scroll event 
                // has been handled/completed and so we turn scrolling events back on
                $(window).data('ajax_in_progress', false);
            });
        }
    });
}