Question

我有这段代码：

$(document).ready(function() {  
    var number = 10;
    var offset = 10;
    var page_number = 2;    

    /* Bind the scroll function to an event */
    $(window).bind('scroll', function(e) {

        /* If the scroll height plus the window height is 
           more than the document height minus 10, continue */
        if($(window).scrollTop() + $(window).height() > 
           $(document).height() - 10) {         

            /* Quick message so you know more stuff is loading */
            $('.loading-more').html('Keep scrolling for more posts to load..');     

            $.post('<?php bloginfo('siteurl') ?>/wp-admin/admin-ajax.php', {
                action: 'and_action',
                off: offset+number,
                pagenumber: page_number - 1
                }, function(data) {
                    offset = offset+number;                         
                    $('.empty-div').append('<p><strong>Page '+page_number+'</strong></p><br />'+data);
                    page_number += 1;               
                    $(this).unbind(e);                                          
            }); 
        }       
    });
});

检查用户是否在页面底部附近并加载更多内容。问题是如果用户在临界点附近缓慢滚动，或者反复快速地上下滚动，$.post函数会运行几次，这意味着你最终会得到一些数据实例。 m loading。

我尝试过做的是绑定和取消绑定e变量，但它没有那么好用。无论如何可能只运行一次post函数，然后将函数重置，这样当用户再次向下滚动时它会再次运行，因此不会加载多个数据实例？

Answer 1

为什么不做这样的事情：

var doingWork = false;

if(($(window).scrollTop() + $(window).height() > $(document).height() - 10) 
    && !doingWork) 
{
    doingWork = true;

然后在您需要恢复功能后将doingWork重置为false

Answer 2

为什么不将布尔值设置为当前状态的表示：loading / ready。

$(document).ready(function () {
    var busy = false;

    $(window).bind('scroll', function (e) {
        if( !busy && goodposition){

           // load more
           busy = true;

           $.post(..., function(date){
             busy = false;
           });
        }
    });
});

Answer 3

有两个答案建议通过设置布尔值来记录是否存在请求。这可能是我采取的路线。另一种选择是取消现有的请求。

$.post会返回XMLHttpRequest个对象。这意味着您可以缓存请求对象并使用.abort()方法取消正在进行的请求：

$(window).bind('scroll', function(e) {
    if($(window).scrollTop() + $(window).height() > 
        $(document).height() - 10) {         

        $('.loading-more').html('Keep scrolling for more posts to load..');     

        if (curxhr && (curxhr.readyState != 4) { // if the curxhr object exists and has not completed
            curxhr.abort(); // abort the request
        }

        curxhr = $.post('<?php bloginfo('siteurl') ?>/wp-admin/admin-ajax.php', {
            action: 'and_action',
            off: offset+number,
            pagenumber: page_number - 1
            }, function(data) {
                // snip                                      
        }); 
    }       
});

重置一个功能，或者可能停止某些功能并重新启动它？

3 个答案: