使用 jquery 在滚动容器中加载更多帖子

Question

我正在尝试创建一个很好的加载更多帖子功能，当您在 div 容器中向下滚动页面时，当您到达容器末尾时，您会看到更多帖子。到目前为止，我尝试的工作正常，但是当我滚动速度非常快时出现错误，因为它发送了更多需要的 ajax 请求并正在加载重复的数据。

 <!-- HTML Structure -->
 <header style="position:fixed"></header> 
 <section class="page-banner" style="height: 420px;"></section>
 <section class="projects-general">
    <div class="projects-wrapper">
       <div class="projects-list-wrap"></div>
    </div>
 </section>
 <section class="contact-intro"></section>  
 <footer></footer> 
 <!-- HTML Structure -->
 $(window).scroll(function() {
    var pjCount = $('.pj-col').length;
    var totalPj = $('#pj-numb').val();
    if (pjCount >= totalPj){
        return false;
    }else{
        if($(window).scrollTop() >= $('.projects-list-wrap').offset().top + $('.projects-list-wrap').outerHeight() - window.innerHeight + $('header').outerHeight()) {
            jQuery.ajax({
                url: ajaxURL,
                type: "POST",
                beforeSend: function () {
                    $('.projects-wrapper').append("<div class='pj-loader'></div>");
                },
                complete: function () {
                    $('.pj-loader').remove();
                },
                data:{
                    action: "pj_load_more",
                    pjCount:pjCount
                },
                success:function(data){
                    $('.projects-list-wrap').append(data);
                },
                error: function(err){
                    //console.log(err);
                }
            });
        }
    }
});

任何想法为什么当你尝试缓慢滚动时它是可以的，但是当你喜欢快速滚动时它会产生重复帖子的错误效果。 非常感谢

Answer 1

因为 ajax 调用需要时间（与我的 attempt to reproduce 相反）并且 scroll 事件就像机关枪一样发射......

同一个 ajax 请求可以被多次触发。

为避免这种情况，请像这样使用标志ajax_request_sent：

// A flag to know if a request is sent and the response is not yet received
let ajax_request_sent = false;

$(window).scroll(function() {
  var pjCount = $('.pj-col').length;
  var totalPj = $('#pj-numb').val();
  if (pjCount >= totalPj) {
    return false;
  } else {

    // Use the flag in the condition (so if sent and not yet received == false)
    if (!ajax_request_sent && $(window).scrollTop() >= $('.projects-list-wrap').offset().top + $('.projects-list-wrap').outerHeight() - window.innerHeight + $('header').outerHeight()) {

      // Set the flag to prevent any concurring request
      ajax_request_sent = true
    
      jQuery.ajax({
        url: ajaxURL,
        type: "POST",
        beforeSend: function() {
          $('.projects-wrapper').append("<div class='pj-loader'></div>");
        },
        complete: function() {
          $('.pj-loader').remove();
        },
        data: {
          action: "pj_load_more",
          pjCount: pjCount
        },
        success: function(data) {
          $('.projects-list-wrap').append(data);
          
          // Unset the flag
          ajax_request_sent = false;
        },
        error: function(err) {
          //console.log(err);
        }
      });
      
    }
  }
});