Wordpress Vanilla JS Ajax load more posts - problem with offset / duplicating posts

Question

Problem with duplicated posts.. The problem of duplicated posts accures when somebody scroll fast or just press END key. If scroll is fast, or even scrolled to the end of the page, there are always duplicates of some posts.

I am using ajax fn from this thread: https://stackoverflow.com/a/18078705

this is my 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, data, callback, async) {    
    var query = [];
    for (var key in data) {
        query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
    }
    ajax.send(url, callback, '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, data, 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, bottomOffset, postsOffset).init();
    });

});

and this is 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');