基于滚动位置的 jquery post 代码触发两次

Question

我有一段 jquery 可以在我的博客上加载新帖子，问题是它运行了两次，这意味着帖子是重复的。我还想找到一种方法，让它在用户距离文档底部还有几个像素(比如 50 个像素)时运行。 (图很简单)。

该错误是在我在调整代码之前获取代码的网站上报告的: http://blog.hycus.com/2011/03/15/infinite-scrolling-like-new-twitter-with-php-mysql-jquery

一条评论建议使用 .data() 但我不太确定它是如何工作的。该代码是从一个单独的 js 文件运行的，其链接位于正文中。 Firebug 报告了两个帖子请求，最终博客帖子显示了两次。

$(document).ready(function(){
    $(window).scroll(function(){
        if($(window).scrollTop() === $(document).height() - $(window).height()){
            $('div#loadmoreajaxloader').show();
            $.post("blog/loadmore", {pid: $(".blogpost:last").attr("id")}, function(html){
                if(html){
                    $("#bloglist").append(html);
                    $('div#loadmoreajaxloader').hide();
                }else{
                    $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                }
            });
        };
    });
});

我无法发布自己问题的答案...我解决了它:

这似乎解决了我的问题，如果有人有更好的解决方案，请告诉我。

还尝试了一些方法来使页面加载在到达页面末尾之前发生(我想 if ($(window).scrollTop()+50 === $(document).height() - $(window).height()) 可能可以解决问题)但它们不起作用。

var lid = $(".blogpost:last").attr("id");
$(document).ready(function() {
$(this).scrollTop(0);

$(window).scroll(function() {
    if ($(window).scrollTop() === $(document).height() - $(window).height()) {
        if(lid !== $(".blogpost:last").attr("id")){
            $('div#loadmoreajaxloader').show();
            $.post("blog/loadmore", {
                pid: $(".blogpost:last").attr("id")
            }, function(html) {
                if (html) {
                    $("#bloglist").append(html);
                    $('div#loadmoreajaxloader').hide();
                } else {
                    $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                }
            });
            lid = $(".blogpost:last").attr("id");
        }
    };
});

});

Answer 1

查看该代码，我不太喜欢它的设置方式。该脚本需要对元素进行一些缓存，这样您就不会不断地一遍又一遍地调用同一个选择器。

我在 onDOMReady 匿名函数回调中使用了 inproc(进程中)变量。这是在顶层设置的，但由于匿名函数提供的闭包，该变量将保持对包含函数可用。在这里，我测试一下它是否true。

您将看到我将所有 jQuery 调用移至开头并将它们添加为变量。这称为缓存，有助于防止在同一脚本中一遍又一遍地发出相同的请求。效率要高得多。请注意，使用 $('div#id') 即可，但无需添加 id 前缀；只需以 id 开头，例如 $('#id')。在我看来，之前的任何事情都是不必要的。

我还设置了 200px 预加载距离。 50px 并不像您想象的那么高；几乎看不出有什么不同。

超时完全是为了延迟内容的加载，以便您可以测试滚动。打开 Firebug 以查看 console.log() 消息。

此脚本大量包含与测试相关的变量和函数，但您应该能够删除任何“出于测试目的”或其某些变体，并使其正常工作。

// For test purposes.
var i = 0;

$(document).ready(function(){
    var inproc = false,
        id,
        $win = $(window),
        $doc = $(document),
        $bloglist = $("#bloglist"),
        $loadmore = $('#loadmoreajaxloader'),
        // For test purposes.
        dummycontent = $('.dummycontent').html(),
        loadtimeout = false;

    // Note, load is for testing; it goes with the setTimeout().
    var callbackBlogLoaded = function(html){
        var self = this;

        // For testing purposes.
        if (loadtimeout !== false) {
            loadtimeout = false;

            setTimeout(function(html){
                callbackBlogLoaded.call(self, html);
            }, 3000);

            return false;
        }

        inproc = false;

        // For test purposes.
        i++;
        html = dummycontent;
        if (i > 5) html = '';

        if (html) {
            // For test purposes.
            $bloglist.append('<p style="color: red; font-weight: bold;">i is ' + i + ' of 5 total</p>' + html);
            $loadmore.hide();
        } else {
            // <center> is deprecated; use a class on a P or DIV instead.
            $loadmore.html('<p class="center">No more posts to show.</p>');
        }
    };

    // For test purposes.
    $bloglist.append($('.dummycontent').html());

    $win.scroll(function(){
        // You need to subtract the scroll-load pad distance from the
        // right-side height calculation, not .scrollTop().
        if ($win.scrollTop() > ($doc.height() - $win.height() - 200)){
            if (inproc == true) {
                // For testing purposes.
                console.log('Content load blocked: In process with another request.');

                return false;
            }

            inproc = true;
            id = $bloglist.has(':last').attr('id');

            // For test purposes
            id = 10;
            loadtimeout = true;

            $loadmore.show();

            // The /echo/html/ is for testing purposes.
            $.post("/echo/html/", { pid: id }, callbackBlogLoaded);
        };
    });
});

http://jsfiddle.net/xUsEA/2/