2014-04-29 2 views
0

페이지에 대해 무한 스크롤 기능을 만들고 있는데 $(window).scroll() 함수가 두 번 실행되는 것으로 보이는 문제가 발생했습니다. 나는 stackoverflow에 비슷한 질문을 본 적이 있지만 빠른 스크롤과 관련이 있으며 요청이 이미 전송 된 날씨를 확인하기위한 장소가 필요하지 않은 것으로 보입니다. 여기에 제가 지금 작업하고있는 코드가 있습니다. 나는 여기에서 놓치기 쉬운 것을 상상합니다.jQuery 스크롤 이벤트가 두 번 발생합니다.

var loading = false; 
var scrollcount = 0; 

$(window).scroll(function(){ 
    scrollcount++; 
    var scrolling = $(document).scrollTop(); 
    var position = $("#ajax-load").offset(); 
    if(scrolling + $(window).height() > position.top - 200 && loading == false){ 
     console.log(loading); //returns 2 falses 
     console.log(scrollcount); //returns 2 of the same number 
     console.log($(document).scrollTop()); //returns same number 
     loading = true; 
     $("#ajax-load").css("display", "block"); 
     $.get("url/to/my/script", info) 
     .done(function(data){ 
      //here's where the items are appended to the document 
      setTimeout(function(){ 
       loading = false; 
      }, 5000); 
     }); 
    } 
}); 

얼굴이 나는 scrollcount 변수와 scrollTop의 리턴() 나는 같은 수의 두 배 이벤트가 실제로 어떤 이유로 같은 시간에 두 번 발사되고 있음을 말해 것으로 보인다 얻을 로그 아웃 할 때. 그것은 두 번 발사되면 다른 하나는, 로딩 변수는 거짓으로 설정하고 두 번째 시간을 불지 않을 것으로 보인다. 내가 말했듯이, 나는 그것이 내가 빠뜨린 아주 단순한 무언가라고 상상한다. 당신의 도움을 주셔서 감사합니다!

+0

jsfiddle을 만들 수 있습니까? –

+0

방금 ​​피들을 만들었고 불행하게도 내가 사이트에서와 같은 결과를 얻지 못하고 있습니다. 다른 곳에서 문제를 재현 할 수 있는지 계속 확인하려고 노력합니다. –

답변

4

첫 번째 추측으로는이 코드가 어디에 있든 이벤트 리스너를 두 번 적용한 것입니다.

$ (window) .unbind ('scroll')을 추가해보십시오. $ (창)

을 .scroll 전에 거짓이 타임 아웃에 설정되어 있기 때문에 비동기 호출

+0

이것은 매력처럼 작동합니다. 문제를 디버그하는 데 약 4 시간을 보냈습니다. 엄청 고마워. –

1
var timeout; 

$(window).scroll(function() { 
    clearTimeout(timeout); 
    timeout = setTimeout(function() { 
     // do your stuff 
    }, 50); 
}); 

사용이 코드 후, 두 번 발사 할 때 로딩 변수에 대한 잘못된 것입니다.

관련 문제