title: jQuery to get posts by ajax causes browser to crash
body: <p>I have a social networking site and on the main feed page I have written some jQuery so that as the user scrolls down when they get near the bottom of the page the next set of posts is retrieved with ajax and appended to the DOM. The browser gets slower after each ajax request though and by the 3rd or 4th one it crashes. Here is my code:</p>
  
  <pre><code>    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() &lt;= ($(window).height() + $(window).scrollTop() + 100)) {
              // get more posts
              if($('#all').is(':visible')) { // more of everything for all tab
                  if(loading_feed==false &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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;
                          }
                      });
                  }
              }
          }
      });
  </code></pre>
  
  <p>I should add that everything was running fine until i added this code and it's doing this in all browsers.</p>
  
  <p>I've found the problem! Its because I was using a class rather than an ID. So where I had the following:</p>
  
  <pre><code>$('#all .span12.columns .loading').hide().before(data);
  </code></pre>
  
  <p>I've changed the item with a class of loading to an id of loading and done this instead:</p>
  
  <pre><code>$('#all .span12.columns #loading').hide().before(data);
  </code></pre>
  
  <p>I'm guessing using a class was making jquery have to search the entire DOM whereas with an ID it knows theres only 1 item so the search can stop when its found it</p>