Wordpress Vanilla JS Ajax 加载更多帖子 - 偏移/复制帖子的问题

问题描述

重复帖子的问题.. 当有人快速滚动或仅按 END 键时，会出现重复帖子的问题。 如果滚动速度很快，甚至滚动到页面的末尾，总会有一些帖子重复。

我正在使用此线程中的 ajax fn：https://stackoverflow.com/a/18078705

这是我的 JS：

var canBeLoaded = true;

var ajax = {};
ajax.x = function () {
    if (typeof XMLHttpRequest !== 'undefined') {
        return new XMLHttpRequest();
    }
    var versions = [
        "MSXML2.XmlHttp.6.0","MSXML2.XmlHttp.5.0","MSXML2.XmlHttp.4.0","MSXML2.XmlHttp.3.0","MSXML2.XmlHttp.2.0","Microsoft.XmlHttp"
    ];

    var xhr;
    for (var i = 0; i < versions.length; i++) {
        try {
            xhr = new ActiveXObject(versions[i]);
            break;
        } catch (e) {
        }
    }
    return xhr;
};

ajax.send = function (url,callback,method,data,async) {
    if (async === undefined) {
        async = true;
    }
    var x = ajax.x();
    x.open(method,url,async);
     
    x.onreadystatechange = function () {
        if (x.readyState == 4) {
            if ( x.status >= 200 && x.status < 400 ) {
                callback(x.responseText);   
            } else {
                console.log('Request Failed. Returned status of ' + x.status);
            }                       
        }
    };
    if (method == 'POST') {
        x.setRequestHeader('X-Requested-With','XMLHttpRequest');
        x.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
    }
    x.send(data);     
};

ajax.post = function (url,async) {    
    var query = [];
    for (var key in data) {
        query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
    }
    ajax.send(url,'POST',query.join('&'),async)
};



var load_ajax_posts = function(postPerPage,bottomOffset,postsOffset) {

    if( document.querySelector('.car') == null ){
        return;
    }    

    var loader = document.getElementById('more_posts');  
    var model = document.getElementById('modelSelect').value;
    var supportPageOffset = window.pageXOffset !== undefined;
    var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
    var scrollTop = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;


    var callback = function(response) {  
        if (response.length) {         
            if ( canBeLoaded ) {                
                loader.innerHTML = 'Ładowanie...'; 
                document.querySelector('.cars-list').insertAdjacentHTML('beforeend',response); 
                canBeLoaded = false; 
                loader.classList.add('post_loading_loader');     
                response = null;             
            }                  
        } else {
            loader.classList.remove('post_loading_loader');
            loader.classList.add('post_no_more_posts');
            loader.innerHTML = 'Nie znaleziono więcej wpisów';
            canBeLoaded = false;  
        }
    }

    
    function init() {

        if( scrollTop > bottomOffset ){
            canBeLoaded = true;
            loader.classList.remove('post_loading_loader');
            loader.innerHTML = 'Wczytaj więcej'; 
        }

        if ( !canBeLoaded ) return;
        
        if ( (!loader.classList.contains('post_loading_loader') || !loader.classList.contains('post_no_more_posts')) ) {
            if( scrollTop > bottomOffset && canBeLoaded === true ){                
    
                var data = {
                    ppp: postPerPage,offset: postsOffset,action: 'loadposts',};
                ajax.post( jsVars.ajax_url,callback );
                postsOffset += postPerPage;
    
            }    
        }
        
        return false;     
    }  
    
    return {
        init,};

}



function offsetTop(el) {
    var rect = el.getBoundingClientRect(),scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    return rect.top + scrollTop
}

ready( function() {    

    var postPerPage = 3;   
    var bottomOffset;
    var postsOffset;
   
    window.addEventListener('scroll',function() {
        postsOffset = document.querySelectorAll('.car').length;
        bottomOffset = offsetTop(document.getElementById('more_posts')) - (window.innerHeight / 1.3);        
        load_ajax_posts(postPerPage,postsOffset).init();
    });

});

这是PHP：

function ajax_loadposts_posts() { 

    $ppp     = (isset($_POST['ppp'])) ? $_POST['ppp'] : 3;
    $offset  = (isset($_POST['offset'])) ? $_POST['offset'] : 0;

    $args = array(
        'post_type'              => array( 'cars' ),'post_status'            => array( 'publish' ),'order'                  => 'DESC','orderby'                => 'title','posts_per_page' => $ppp,'offset'          => $offset,);  

    $the_query = new WP_Query( $args );

    $out = '';

    if( $the_query->have_posts() ):                 
        $i=$offset+1; while( $the_query->have_posts() ) : $the_query->the_post();

            set_query_var( 'iteration',$i );
            $out .= get_template_part( 'cars/content',get_post_type() );

        $i++; endwhile;
    endif;

    wp_reset_postdata();    
        
    wp_die($out);

}
add_action('wp_ajax_loadposts','ajax_loadposts_posts');
add_action('wp_ajax_nopriv_loadposts','ajax_loadposts_posts');

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）