仅在到达底部一次时触发 Waypoints jQuery 插件答案

【问题标题】：Making the Waypoints jQuery plugin trigger when reaching the bottom only once仅在到达底部一次时触发 Waypoints jQuery 插件
【发布时间】：2014-05-26 16:47:05
【问题描述】：

我正在使用jQuery Waypoints 插件在用户到达页面底部时触发某些内容。一旦用户到达页面底部，就会触发 AJAX 调用，我会收到 JSON 响应。完成此操作后，页面大小会增加，这意味着我们不再位于页面底部（内容被添加到页面中），但即使在底部，Waypoints 插件仍然会重复 AJAX 调用两次或三次页面的位置已经不存在了，它远低于...

这是我正在努力解决的问题。我尝试了很多我想到的想法，但没有一个奏效。这就是我使用 Waypoints 插件的方式：

var pop_loader  = $('<br /><div class="loading row" style="display: none;"><div class="col-lg-12 center">' + 
    generate_preloader(32, 3) + '</div></div><br />');
var pop_footer  = $('.last-box-popular');
var pop_start   = { from: 24 };
var pop_opts    = { offset: '100%' };

pop_footer.waypoint(function(event, direction) {

    var $boxCount = document.getElementsByClassName('image');

    if ($boxCount.length < 24){
        return false;   
    }

    pop_footer.waypoint('destroy');
    $('.loadMore').append(pop_loader);
    $('.loading').fadeIn('slow');

    delay('pop', function(){
        $.ajax({
            type: 'GET',
            url: 'image.php?action=fetchMore&start=' + pop_start.from,
            success: function(data){

                try {
                    var response = $.parseJSON(data);
                } catch (e) {
                    display_alert(lang.L_TPL_AJAX_CATCH, 'danger', 3000, 'top');
                    return false;
                }

                if ('error' in response || $.isEmptyObject(response.images)) {
                    pop_loader.hide();
                    return false;
                }

                pop_start.from += 24;
                pop_loader.detach();
                pop_footer.waypoint(pop_opts);

                // Remove previous last class
                $('.image').removeClass('last-box-popular');
                var imagesLength = response.images.length - 1;

                for (var key in response.images) 
                {
                    var image = response.images[key];

                    var imageHTML = '<span class="image' + ((imagesLength == key) ? ' last-box-popular' : '') + '">';
                    imageHTML += '<div class="topleft-corner">';
                    imageHTML += '<div class="dropdown">';
                    imageHTML += '<span class="icon-share dropdown-toggle" id="share-dropdown" data-toggle="dropdown"></span>';
                    imageHTML += '<ul class="dropdown-menu share-dropdown" role="menu" aria-labelledby="share-dropdown">';
                    imageHTML += '<li role="presentation">';
                    imageHTML += '<a href="' + generate_site_url() + 'store/t/' + image.image_name + '.' + image.image_extension + '" class="facebook_share" href="#" role="menuitem" tabindex="-1">';
                    imageHTML += '<span class="icon-facebook-circled-2"></span>&nbsp;&nbsp;Facebook';
                    imageHTML += '</a>';
                    imageHTML += '</li>';
                    imageHTML += '<li role="presentation">';
                    imageHTML += '<a href="http://twitter.com/share?url=' + generate_site_url() + 'store/t/' + image.image_name + '.' + image.image_extension + '&amp;text=Shared via @IMGzer - " class="twitter_share" role="menuitem" tabindex="-1">';
                    imageHTML += '<span class="icon-twitter"></span>&nbsp;&nbsp;Twitter';
                    imageHTML += '</a>';
                    imageHTML += '</li>';
                    imageHTML += '<li role="presentation">';
                    imageHTML += '<a href="https://plus.google.com/share?url=' + generate_site_url() + 'store/t/' + image.image_name + '.' + image.image_extension + '" class="google_share" role="menuitem" tabindex="-1" href="#">';
                    imageHTML += '<span class="icon-gplus-circled-1"></span>&nbsp;&nbsp;Google+';
                    imageHTML += '</a>';
                    imageHTML += '</li>';
                    imageHTML += '</ul>';
                    imageHTML += '</div>';
                    imageHTML += '</div>';
                    imageHTML += '<div class="topright-corner">';
                    imageHTML += '<span class="glyphicon glyphicon-minus-sign" title="Report" data-placement="left" data-toggle="modal" data-target="#report" data-report="image" data-reference="' +  image.image_name + '"></span>';
                    imageHTML += '</div>';
                    imageHTML += '<section class="row">';
                    imageHTML += '<div class="col-lg-12 center upload-output">';
                    imageHTML += '<br /><br />';
                    imageHTML += '<div class="img-container">';
                    imageHTML += '<div class="helper"></div>';
                    imageHTML += '<a href="' + generate_site_url() + 'image/' + image.image_name + '">';
                    imageHTML += '<img src="' + generate_site_url() + 'store/t/' + image.image_name + '.' + image.image_extension + '" class="img-thumbnail">';
                    imageHTML += '</a>';
                    imageHTML += '</div>';
                    imageHTML += '<br />';
                    imageHTML += '<span class="small">Uploaded ' + image.upload_time + ' by <strong>' + ((image.username == null || image.username == '') ? 'a guest' : '<a href="' + generate_site_url() + 'user/' + image.username + '">' + image.username + '</a>') + '</strong></span>';
                    imageHTML += '<br />';
                    imageHTML += '<span class="label label-success"><span class="glyphicon glyphicon-thumbs-up"></span> ' + image.image_likes + '</span>&nbsp;';
                    imageHTML += '<span class="label label-danger"><span class="glyphicon glyphicon-thumbs-down"></span> ' + image.image_dislikes + '</span>&nbsp;';
                    imageHTML += '<span class="label label-warning"><span class="glyphicon glyphicon-heart"></span> ' + image.image_favorited + '</span>';
                    imageHTML += '</div>';
                    imageHTML += '</section>';
                    imageHTML += '</span> ';

                    $('.images').append(imageHTML);
                    $('.image').slideDown('fast');
                }
            }
        });
    }, average_ajax_delay);

}, pop_opts); // Popular

如何让 Waypoints 插件在到达底部时进行 一次 AJAX 调用。然后在到达“新”底部时进行另一个 AJAX 调用。

如果有任何其他需要使这个问题更清楚，请告诉我。

【问题讨论】：

您能否设置一个超时时间以确保它在设定的时间内不会多次调用？

标签： javascript jquery html ajax jquery-waypoints

【解决方案1】：

在插入新的 DOM 元素后尝试$.waypoints('refresh');，而不是取消绑定然后重新绑定航点。

但是，也可能是滚动事件触发了多个 ajax 调用，这些调用使事情发生了变化。因此，您可能需要throttle 该函数以防止在响应请求之前多次调用。

【讨论】：

【解决方案2】：

嗯，似乎在到达容器底部时尝试实现标准 AJAX 调用有点错误，即使我尝试使用内部函数 http://jsfiddle.net/f3YZ2/105/ 刷新航点的插件

我创建了一个更优雅的解决方案，而是在页面的最底部放置了一个页脚元素。您可以使用 css 使其不可见，例如：

.footer{opacity:1;visibibility:hidden}

你应该避免隐藏它，因为它不会被插件检测到：

这里是完整的例子：http://jsfiddle.net/f3YZ2/108/

【讨论】：

为@Theodore 的小提琴添加“等待”锁使它在 Chrome 35.0 中对我有用。 My fork of the fiddle

【解决方案3】：

在创建航点时将triggerOnce: true 作为选项传递。在您的 success 方法中，当您向 DOM 渲染其他元素时，添加一个新的航点。

【讨论】：

【解决方案4】：

看起来你正在尝试实现无限滚动，所以为什么不使用 jQuery Waypoints 的无限滚动方法：http://imakewebthings.com/jquery-waypoints/shortcuts/infinite-scroll/

当然你的服务器端实现必须改变，但好处是“禁用 JavaScript 的用户仍然可以使用更多链接。

【讨论】：

【解决方案5】：

我以前做过这种事情。我的做法是，我不是将航路点附加到通过 ajax 添加的最后一个元素（我们称它们为 ajax 项目），而是附加到始终位于最后一个 下方的 DOM 中的元素ajax 项目（我们称之为加载更多）。所以你向下滚动，航点点击load more，加载新内容，这会推动load more向下。因此，您可以再次滚动并再次点击 load more 并触发 ajax。对我来说工作得很好。

一些提示： 1）您需要在触发ajax调用之前检查方向是否向下。 2）当您单击返回按钮并转到页面时，航点可能会在页面加载时触发。如果您需要阻止这种情况，请在触发 ajax 调用之前检查滚动事件。请注意，如果之前页面上有任何滚动，浏览器将自动触发滚动事件，因此您仅在第二个和以后的滚动事件上触发您的航点/ajax。

简单的代码示例（我使用的是 jQuery，但你会明白的）；

$('.load-more').waypoint(function(direction) {
    if (direction === 'down' && content.o.scroll > 1) {
         // Do your stuff here
    }

}, {offset: '170%'});

$(window).on('scroll', function () {
    content.o.scroll++;
});

【讨论】：