:
$(document).ready(function(){ 
var counter=0;
    var pageStart=1;
    var pageSize=10;
    var isEnd=false;
    getData(pageStart,pageSize);
    function getData(offset,size){
        $.ajax({
            url: ,
            type: "GET",
            async: true, 
            dataType:"json",
            contentType:"application/json; charset=utf-8", 
            success: function(data){
                respon=data.data.result;
                var sum=respon.length;
                for(var i=(offset-1)*size;i<sum;iPP){
                    creatDiv(respon,i); //div
                }
                if(((offset-1)*size+sum)===data.data.total){
                    $(".noMoreData").show().html("");
                    isEnd=true;
                    return isEnd;
                  }
            },
            error: function(err){
            } 
        });
        $(window).scroll(function(){
            if(isEnd==true){
                return;
            }
         if($(document).height()-$(window).scrollTop()-$(window).height()<100){
                console.log("100px")
                pageStartPP;
                getData(pageStart,pageSize);
            }
        })    
        

})
load conditionally when searching:

function search(){
    $(".personInfo").empty();
    var counter=0;
    var index=1;
    var pageSize=10;
    var isEnd = false;
    searchData(index,pageSize);
    
    function searchData(pageIndex,eachPageSize){
        $.ajax({
            url:,
            type:"post",
            async:true,
            dataType:"json",
            data:{
                    index:pageIndex,
                    pageSize:eachPageSize,
                    name:$("-sharpname").val(),
                 },
            success:function(data){
                if(data.status==0){
                    if(data.data.total!=0){
                        $("-sharptotal").empty();
                        $("-sharptotal").html(data.data.total);
                        respon=data.data.result;
                        if(respon.length!==0){
                            var sum=respon.length;
                            for(var i=0;i<sum;iPP){
                              creatDiv(respon,i);
                            }
                            if(((pageIndex-1)*eachPageSize+sum)===data.data.total){
                                isEnd=true;
                         (".noMoreData").show().html("");
                            }
                            $(window).scroll(function(){
                                if(isEnd==true){
                                    return;
                                } if($(document).height()-$(window).scrollTop()-$(window).height()<100){
                                    indexPP;
                                    searchData(index,pageSize);
                                }
                            })
                        };
                    }else{
                       console.log("")
                }else{
                    console.log(data.message);
                };
            },
            error:function(data){
                console.log("err"); 
            }
        })
    } 
}

the desired effect is to display all the data initially and the data that meets the criteria during the search, both of which dynamically load more data, but now the slide of the scroll bar during the search triggers the initialized loading of more interfaces, causing the data to be loaded repeatedly