javascript - 快速滚动时多次触发ajax请求

Question

在这里，我试图实现无限滚动，但是当我滚动得太快时会发生什么，它会触发具有相同参数的多个 ajax 请求，这会再次导致相同的数据。如何从这个问题中克服请帮助。

(function( $ ){


 $.fn.scrollPagination = function(options) {

        var opts = $.extend($.fn.scrollPagination.defaults, options);  
        var target = opts.scrollTarget;
        if (target == null){
            target = obj; 
        }
        opts.scrollTarget = target;

        return this.each(function() {
          $.fn.scrollPagination.init($(this), opts);
        });

  };

  $.fn.stopScrollPagination = function(){
      return this.each(function() {
        $(this).attr('scrollPagination', 'disabled');
      });

  };

  var itr = 2;
  $.fn.scrollPagination.loadContent = function(obj, opts){
     var target = opts.scrollTarget;
     var mayLoadContent = $(target).scrollTop()+opts.heightOffset >= $(document).height() - $(target).height();
     if (mayLoadContent){
         if (opts.beforeLoad != null){
            opts.beforeLoad(); 
         }

         $(obj).children().attr('rel', 'loaded');
         $.ajax({
              type: 'POST',
              url: opts.contentPage+"?iteration="+itr,
              data: opts.contentData,
              success: function(data){
                itr++;
                $(obj).append(data); 
                var objectsRendered = $(obj).children('[rel!=loaded]');

                if (opts.afterLoad != null){
                    opts.afterLoad(objectsRendered);    
                }
              }
         });
     }

  };

  $.fn.scrollPagination.init = function(obj, opts){
     var target = opts.scrollTarget;
     $(obj).attr('scrollPagination', 'enabled');

     $(target).scroll(function(event){
        if ($(obj).attr('scrollPagination') == 'enabled'){
                $.fn.scrollPagination.loadContent(obj, opts);
                //alert(event.isPropagationStopped());
        }           
            //event.stopPropagation();
            //console.log(event.isPropagationStopped());
            event.preventDefault();
     });

     //$.fn.scrollPagination.loadContent(obj, opts);

 };

 $.fn.scrollPagination.defaults = {
         'contentPage' : null,
         'contentData' : {},
         'beforeLoad': null,
         'afterLoad': null  ,
         'scrollTarget': null,
         'heightOffset': 0        
 }; 
})( jQuery );

Answer 1

当滚动到达页面底部时，我曾经调用我的 ajax 函数。

function nearBottomOfPage() {
return $(window).scrollTop() > $(document).height() - $(window).height() - 200;
}

$(window).scroll(function(){      
    if (loading) {
      return;
    }

    if(nearBottomOfPage()) {
      loading=true;
      page++;
      $("#place_of_loading_image").show(); 
      $.ajax({
        url:'your source',
        type: 'get',
        dataType: 'script',
        success: function() {
            $("#place_of_loading_image").remove(); 
            loading=false;
        }
      });
    }
  });

Answer 2

每触发 10 次滚动事件触发一次 ajax 怎么样？

$.fn.scrollPagination.init = function(obj, opts) {
    var target = opts.scrollTarget;
    $(obj).attr('scrollPagination', 'enabled');
    target.scrollCount = 0;
    $(target).scroll(function(event) {
        this.scrollCount++;
        if (this.scrollCount % 10 == 0) {
            if ($(obj).attr('scrollPagination') == 'enabled') {
                $.fn.scrollPagination.loadContent(obj, opts);
                //alert(event.isPropagationStopped());
            }
            //event.stopPropagation();
            //console.log(event.isPropagationStopped());
            event.preventDefault();
        }
    });
}