Ajax 무한 스크롤 기능이 두 번 실행됩니다.

Question

아래의 아약스 기능은 이상한 이유로 2 번 실행됩니다. loadMoreResults(); 함수는 서버에서 데이터를 검색하는 데 사용됩니다. 나는 서버에 전송 된 데이터를 Google 개발자 도구를 사용하여 추적하여 ajax 요청이 두 번 연속으로 발생했음을 보여주었습니다. 나는 이것이 사용자가 빠르게 스크롤 할 때 일어난다 고 생각한다.

//Executed when user has scrolled bottom of the page 
$(window).scroll(function (e) { 
if ($(window).scrollTop() == $(document).height() - $(window).height()) { 
    loadMoreResults(); 
} 
}); 

어떻게 이런 일이 발생하지 않도록 할 수 있습니까? 감사합니다.

Answer 1

사용자가 너무 빠르게 스크롤하고 새 결과로 문서를 업데이트하지 않기 때문일 수 있습니다.

기능이 실행 중일 때 loadMoreResults()을 호출하지 못하도록하는 플래그를 사용해보십시오.

함수가 시작될 때 true로 설정하고 결과가 끝나면 결국 false로 설정합니다. 플래그 확인은 으로 설정하기 전에 loadMoreresults() 기능의 시작 부분에 바로 위치시킬 수 있습니다.

예 : 내가 알아낼 수없는 이유

function loadMoreResults() { 
    if (flag) return; 
    flag = true; 
[...] 
    flag = false; 
} 

Answer 2

. 깃발을 세우는 것이 저를 위해 작동하지 않았습니다. 함수 호출이 두 번 계속 실행됩니다. 내 성공 콜백에서 시간 제한을 사용해야했습니다.

.then(function(resp) { 
    var i, len, ref, t; 
    ref = resp.data.users; 
    for (i = 0, len = ref.length; i < len; i++) { 
    t = ref[i]; 
    $scope.users.push(t); 
    } 

    return setTimeout((function() { 
    if (resp.data.users.length > 0) { 
     return $scope.busy = false; 
    } 
    }), 500);