[Javascript] jquery infinite scroll

page 단위로 제공하는 api를 사용하여 ajax 를 사용해서 무한 스크롤을 만들어보자

$(function(){
    $(window).scroll(function(){
        let $window = $(this);
        let scrollTop = $window.scrollTop();
        let windowHeight = $window.height();
        let documentHeight = $(document).height();
        
        // scrollbar의 thumb가 바닥 전 500px까지 도달 하면 리스트를 가져온다.
        if(scrollTop + windowHeight + 500 > documentHeight) { 
            oneTime = true;
            fetchList();
        }
    })
})

아래는 fetchList

$.ajax({
        url: "/url/url2",
        data: {
           dat : dat
        },
        type: "get",
        dataType: "json",
        success: function(result){
            let itemlist = result.list;
            
            // 컨트롤러에서 가져온 방명록 리스트는 result.data에 담겨오도록 했다.
            // 남은 데이터가 5개 이하일 경우 무한 스크롤 종료
            let length = itemlist.length;
            if( length < 5 ){
                isEnd = true;
            }
			
            // 중복 실행 방지
            if(oneTime)
            {
                // 검색 리스트 그려주기
                itemlist.forEach((data, index) => {
                    renderList(data);
                });
            }

            pg = pg +1 ;
            oneTime = false;
        }
    });

let renderList = function(data, vo){
    var html ='<a href=""></a>';
    $('body').append(html);
}

간혹 엄청 빨리내리면 ajax가 데이터를 가져오고 그려주는데 시간이 걸리다 보니..

느릴 수 있는데 고건 어쩔 수 없는 듯