尝试在页面滚动上加载帖子时出现 Ajax/Jquery/PHP 问题

Question

我正在尝试在我的 word press 网站上使用 Ajax 加载我的帖子。一切正常，除了少数。当用户到达页脚上方 2000 像素时，我已经设置了 ajax 调用，现在的问题是，一旦用户到达该点，ajax 函数就会被一次又一次地调用，直到通过 ajax 加载新帖子我需要的是调用 ajax 函数仅当用户到达该点时才会加载帖子，然后用户再次向下滚动并到达该点，并且每次都应调用一次 ajax 函数。此外，每次我设置了 (3) 个要加载的帖子数量，每次相同的帖子再次加载 n 时。下面是我的代码

PHP 代码

function ajax_load_posts($args) {
    $ajax = false;
    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
        strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
        $ajax = true;
    }
    $post-per-page =3;
    $pagination = $_POST['page'] + 1;
    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'order' => 'DESC'
        'orderby'   => 'title',
        'posts_per_page' =>$post-per-page,
        'paged'=>$pagination
    );
    $query = new WP_Query($args);
    if ($query->have_posts()):
        while ($query->have_posts()): $query->the_post();
            include 'ajax-content.php';
        endwhile;
    else:
        echo "false";
    wp_reset_postdata();
    if($ajax) die();
}

Javascript/jQuery 代码

jQuery(document).ready(function($) {
    $(window).scroll(function() {
        var that = $('#loadMore');
        var page = $('#loadMore').data('page');
        var newPage = page + 1;
        var ajaxurl = $('#loadMore').data('url');
        var bottomOffset = 2000; 
        if( $(document).scrollTop() > ( $(document).height() - bottomOffset )){
            $.ajax({
                url: ajaxurl,
                type: 'post',
                data: {
                    page: page,
                    action: 'ajax_load_posts'
                },
                error: function(response) {
                    console.log(response);
                },
                success: function(response) {
                    if (response == 0) {
                        if ($("#no-more").length == 0) {
                            $('#ajax-content').append('<div id="no-more" class="text-center"><p>No more posts to load.</p></div>');
                        }
                        $('#loadMore').hide();
                    } else {
                        $('#loadMore').data('page', newPage);
                        $('#ajax-content').append(response);
                    }
                }
            });
        }
    });
});

Answer 1

您需要在发出如下请求时进行跟踪：

function ajax_load_posts($args) {
    $ajax = false;
    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
        strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
        $ajax = true;
    }

    // camel case is more excepted in WP/PHP for var names
    $posts_per_page = 3;

    // no need to increment here that is handled by js
    $pagination = $_POST['page'];

    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'order' => 'DESC'
        'orderby'   => 'title',
        'posts_per_page' => $posts_per_page,
        'paged'=>$pagination
    );
    $query = new WP_Query($args);
    if ($query->have_posts()):
        while ($query->have_posts()): $query->the_post();
            include 'ajax-content.php';
        endwhile;
    else:
        echo "false";
    wp_reset_postdata();
    if($ajax) die();
}

jQuery(document).ready(function($) {
    // grab/set these on load rather that each scroll
    var page = $('#loadMore').data('page');
    var ajaxurl = $('#loadMore').data('url');
    var bottomOffset = 2000;

    // track if already fetching
    var isFetching = false;

    $(window).scroll(function() {
        // is this needed
        var that = $('#loadMore');

        // added check for isFetching
        if( $(document).scrollTop() > ( $(document).height() - bottomOffset ) && ! isFetching){
            // update so we dont keep calling
            isFetching = true;
            $.ajax({
                url: ajaxurl,
                type: 'post',
                data: {
                    page: page,
                    action: 'ajax_load_posts'
                },
                error: function(response) {
                    console.log(response);
                },
                success: function(response) {
                    if (response == 0) {
                        if ($("#no-more").length == 0) {
                            $('#ajax-content').append('<div id="no-more" class="text-center"><p>No more posts to load.</p></div>');
                        }
                        $('#loadMore').hide();

                        // update so the next time user hits scroll point we can fetch
                        isFetching = false;

                        // update page no need to set a new var and only if we get results
                        page++; 
                    } else {
                        $('#loadMore').data('page', newPage);
                        $('#ajax-content').append(response);
                    }
                }
            });
        }
    });
});