jQuery가 아약스에 의해 게시물을 얻으려면 브라우저가 충돌합니다.

Question

소셜 네트워킹 사이트가 있고 기본 피드 페이지에 다음 jquery를 작성하여 사용자가 페이지 맨 아래에 가까이 갈 때 스크롤 할 때 게시물은 ajax로 검색되어 DOM에 추가됩니다. 브라우저는 각 Ajax 요청 후 느려지고 3 번째 또는 4 번째 크래시가 발생합니다.

feed_offset = posts_offset = post_comments_offset = 0; 
    loading_posts = loading_post_comments = loading_feed = false; 
    posts_end = post_comments_end = feed_end = false; 

/* Automatically get new posts as the user scrolls down */ 
    $(window).scroll(function() { 
     if ($('body').height() <= ($(window).height() + $(window).scrollTop() + 100)) { 
      // get more posts 
      if($('#all').is(':visible')) { // more of everything for all tab 
       if(loading_feed==false && feed_end==false) { 

        loading_feed = true; 
        $('#all .span12.columns .loading').show(); 

        $.post('/feed/ajax_get_more_feed/'+feed_offset, function(data) { 
         $('#all .span12.columns .loading').hide().before(data); 
         feed_offset+= 10; 
         loading_feed = false; 
         if(data=='') { 
          feed_end = true; 
         } 
        }); 
       } 
      } else if($('#posts').is(':visible')) { // more posts for posts tab 
       if(loading_posts==false && posts_end==false) { 

        loading_posts = true; 
        $('#posts .span12.columns .loading').show(); 

        $.post('/feed/ajax_get_more_feed_posts/'+posts_offset, function(data) { 
         $('#posts .span12.columns .loading').hide().before(data); 
         posts_offset+= 10; 
         loading_posts = false; 
         if(data=='') { 
          posts_end = true; 
         } 
        }); 
       } 
      } else { // more post comments for post comments tab 
       if(loading_post_comments==false && post_comments_end==false) { 

        loading_post_comments = true; 
        $('#post_comments .span12.columns .loading').show(); 

        $.post('/feed/ajax_get_more_feed_post_comments/'+post_comments_offset, function(data) { 
         $('#post_comments .span12.columns .loading').hide().before(data); 
         post_comments_offset+= 10; 
         loading_post_comments = false; 
         if(data=='') { 
          post_comments_end = true; 
         } 
        }); 
       } 
      } 
     } 
    }); 

나는이 코드를 추가 할 때까지 모든 것이 잘 실행되고이 모든 브라우저에서이 작업을하고있어 추가해야합니다 : 여기 내 코드입니다.

문제점을 발견했습니다. 그것은 ID보다는 클래스를 사용했기 때문입니다. 그래서 나는 다음과 같은 있었다 여기서

$('#all .span12.columns .loading').hide().before(data); 

내가로드의 ID에로드의 클래스와 항목을 변경하고이 대신 수행했습니다

$('#all .span12.columns #loading').hide().before(data); 

I 클래스이었다 사용 같은데요 jquery는 전체 DOM을 검색해야하지만 ID가있는 경우 ID는 1 개이므로 아이템을 찾을 때 검색을 중지 할 수 있습니다.

Answer 1

문제점을 발견했습니다! 그것은 ID보다는 클래스를 사용했기 때문입니다. 그래서 나는 다음과 같은 있었다 여기서

$('#all .span12.columns .loading').hide().before(data); 

내가로드의 ID에로드의 클래스와 항목을 변경하고이 대신 수행했습니다

$('#all .span12.columns #loading').hide().before(data); 

I 클래스이었다 사용 같은데요 jquery가 전체 DOM을 검색해야하는 반면 ID가 있으면 아이템이 1 개 밖에 없으므로 검색시 검색이 중지 될 수 있습니다.

Answer 2

소셜 네트워크 사이트에서 작업 중이라고 말하면 한 번에 여러 개의 ajax 호출을 받는다는 것을 의미합니다. 새로운 Ajax 호출을 게시하기 전에 중단 된 Ajax 호출을 시도하거나 previos Ajax 호출을 중단하십시오.