2012-11-01 53 views
0

这里我试图实现无限滚动,但是当我滚动得太快时会发生什么情况,它会使用相同的参数激发多个ajax请求,从而再次导致相同的数据。问题有帮助。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); 
+0

你有什么解决方案?因为我也面临同样的问题。 –

回答

0

如何触发滚动事件触发每隔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(); 
     } 
    }); 
} 
+0

thanx好友为你的时间我试过你的建议,但不适用于我我已编辑完整的代码我的职位请看看如果可以给我任何其他方式来解决它。 – mkat

0

我以前调用我的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; 
     } 
     }); 
    } 
    }); 
+0

它可以在所有浏览器中正常工作。 ??? – mkat

+0

对我而言,它适用于所有主流浏览器。 – anumonp