[무한 스크롤] 마지막 데이터에서 반복되어서 계속 스크롤 됨

 

비동기로 넘어온 데이터가 없는데 불구하고 스크롤이 멈추지 않고 계속 스크롤이 작동되었다.

데이터가 마지막이거나 없는 경우를 인지하고 스크롤 이벤트를 제거할 수 있도록 하였다.

 

해결방안

let isLastPage = false; // 마지막 페이지 여부를 나타내는 플래그

 

전역변수로 마지막 페이지인지 확인하는 플래그를 추가한다.

 

//마지막 페이지인지 체크
if (data.length === 0) {
    console.log("마지막 페이지 인지 체크")
    isLastPage = true;
    window.removeEventListener('scroll', onScroll); // 스크롤 이벤트 리스너 제거
}

 

비동기 실행가 실행되어 response 가 성공하였을 때  넘온 데이터의 사이즈를 체크하여

플래그를 true로 변경하고 window에서 scroll 이벤트가 실행되지 않도록 스크롤 이벤트 리스너를 제거한다.

 

function loadMembers() {
		if (loading || isLastPage) return;

 

함수 상단에 isLastPage의 값이 리턴될 수 있도록 추가해준다.