php - ajax call its repeat append same data

Question

I am making on scroll data load from mysql table using below code but on scroll it repeat some of data while loader running

$(document).ready(function(){
    $(window).scroll(function(){
        var lastID = $('.load-more').attr('lastID');
        if(($(window).scrollTop() == $(document).height() - $(window).height()) && (lastID != 0)){
            $.ajax({
                type:'POST',
                url:'result_data.php',
                data:'id='+lastID,
                beforeSend:function(){
                    $('.load-more').show();   
                },
                success:function(response){
                    setTimeout(function() {
                    $('.load-more').remove();
                    $('#postList').append(response);
                }, 400);
                }
            });
        }
    });
});

Answer 1

You can use .after() or .insertAfter()

The .after() and .insertAfter() methods perform the same task. The major difference is in the syntax—specifically, in the placement of the content and target. With .after(), the content to be inserted comes from the method's argument: $(target).after(contentToBeInserted). With .insertAfter(), on the other hand, the content precedes the method and is inserted after the target, which in turn is passed as the .insertAfter() method's argument: $(contentToBeInserted).insertAfter(target).

$(document).ready(function(){
    $(window).scroll(function(){
        var lastID = $('.load-more').attr('lastID');
        if(($(window).scrollTop() == $(document).height() - $(window).height()) && (lastID != 0)){
            $.ajax({
                type:'POST',
                url:'result_data.php',
                data:'id='+lastID,
                beforeSend:function(){
                    $('.load-more').show();   
                },
                success:function(response){
                    setTimeout(function() {
                    $('.load-more').remove();
                    // $('#postList').append(response);
                    $('#postList').after(response);
                }, 400);
                }
            });
        }
    });
});