Question

我有一个社交网站，在主要供稿页面上我编写了一些jQuery，以便当用户靠近页面底部时向下滚动，下一组帖子将使用ajax检索并附加到DOM 。浏览器在每个ajax请求之后变慢，而第三个或第四个请求崩溃。这是我的代码：

    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

正如您所说的那样，您正在社交网站上工作，可能是您一次有多个ajax调用。尝试在发布新的ajax调用之前使用abort进行顺序Ajax调用或终止previos Ajax调用。

Answer 2

我发现了问题！因为我使用的是课而不是ID。所以，我有以下内容：

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

我已经使用加载类将项目更改为加载ID并完成此操作：

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

我猜使用一个类让jquery必须搜索整个DOM，而使用ID它知道只有1项，所以搜索可以在找到它时停止

jQuery通过ajax获取帖子会导致浏览器崩溃

2 个答案: