자바 스크립트가 너무 빨리 호출됩니다.

Question

나는 여기에 성가신 작은 문제가 있습니다. page2에서 내용을로드하고 #content에 코드를 추가하는 코드가 있습니다. 작동하지만 때로는 두 번 발생하고 page2 이전에 page3을 추가합니다. 그 이유는 page3에 단지 하나의 게시물이 있기 때문입니다. 그러나 page2에는 4 개의 게시물이 있습니다.

추가 작업이 다시 끝날 때까지 코드를 대기 상태로 만들려면 어떻게해야합니까? 여기 내 코드는 다음과 같습니다.

$(window).scroll(
    function(){ 
    if(browserName != "safari") { 
     var curScrollPos = $('html').scrollTop(); 
    } 
    else { 
     var curScrollPos = $('body').scrollTop(); 
    } 

    if(curScrollPos > 218) { 
     $("#sidebar").addClass("open"); 
    } 

    if(curScrollPos < 218) { 
     $("#sidebar").removeClass("open"); 
    } 

    var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop(); 

    if(scrollBottom == 0) { 
     if(home != 0 || search != 0 || category != 0) { 
     if(currentPage < numPages) { 
      $("#main .loader-posts").fadeIn(); 
      currentPage++; 

      if(search == 1) { 
      var getPostsUrl = "page/"+currentPage+"/?s="+searchTerm; 
      } 
      else { 
      var getPostsUrl = "page/"+currentPage; 
      } 

      $.get(getPostsUrl, function(data) { 
        $("#main .loader-posts").fadeOut(
        'slow', 
        function(){ 
         var newPosts = $(data).find("#content").html(); 
         $("#content").append(newPosts); 
         $('#container.tiles').masonry('reload'); 
        }); 
       }); 
     } 
     } 
     else { 

     } 
    } 

Answer 1

다음 페이지를로드하는지 여부를 추적하는 변수를 추가하고 현재 다른 것을로드하지 않는 경우에만로드합니다. 이것은 문제의 근원입니다. .scroll()은 다음 섹션이로드되기 전에 두 번 실행될 수 있으며 currentPage < numPages 인 경우 currentPage이 증가하고 다시로드됩니다. .get()은 비동기식이므로 이후 요청이 있기 전에 먼저 .get() 요청을 완료하지 못할 수도 있습니다. loading 상태를 추가하면이 문제가 해결됩니다.

var loading = 0; // Loading state 

if (scrollBottom == 0) { 

    if (home != 0 || search != 0 || category != 0) { 

     if (currentPage < numPages && !loading) { // Only proceed if not loading 
      loading = 1; // We have initiated loading 

      $("#main .loader-posts").fadeIn(); 
      currentPage++; 

      if (search == 1) { 
       var getPostsUrl = "page/" + currentPage + "/?s=" + searchTerm; 
      } else { 
       var getPostsUrl = "page/" + currentPage; 
      } 

      $.get(getPostsUrl, function(data) { 
       $("#main .loader-posts").fadeOut('slow', function() { 
        var newPosts = $(data).find("#content").html(); 
        $("#content").append(newPosts); 
        $('#container.tiles').masonry('reload'); 
        loading = 0; // We are done loading 
       }); 
      }); 
     } 
    } else { 

    } 

} 

Answer 2

아마 당신은 당신이 $의 갔지() 전에 확인하고 $ 갔지() 콜백에서 false로 설정할 수 있습니다 isBusy 플래그를 추가 할 수 있습니까?