jQueryのAJAXによって投稿が

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); 

私はクラスだった使用して推測しています作成するjqueryはDOM全体を検索する必要がありますが、IDを指定すると1つのアイテムしか見つからないため、検索が終了すると検索が停止することがあります

Answer 1

問題が見つかりました。なぜなら、IDではなくクラスを使用していたからです。だから私は、次のいた場所：

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

私はロードのIDへの負荷のクラスでアイテムを変更し、代わりにこれをやった：

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

私はクラスだった使用して推測していますjQueryの検索を停止することができますので、IDとそれだけで1つのアイテムをtheresのを知っているのに対し、そのはそれをあなたがするたびに、より多くのデータを中に読み込むよう、ブラウザのメモリフットプリントはどう

Answer 2

ソーシャルネットワークサイトで作業していると言えば、あなたは一度に複数のajaxコールを持っているということです。 新しいAjax呼び出しを送信する前に、連続したAjax呼び出しを行うか、previos Ajax呼び出しを中止して、中断を使用して呼び出します。