javascript - 使 Waypoints jQuery 插件仅在到达底部一次时触发

Question

我正在使用 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 调用。然后在到达"new"底部时进行另一个 AJAX 调用。

如果需要任何额外的信息来使这个问题更清楚，请告诉我。

Answer 1

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

但是，也可能是滚动事件触发了多个 ajax 调用，这使得事情发生了变化。所以你可能需要 throttle该功能可防止在响应请求之前进行多次调用。