在这里，我试图实现无限滚动，但是当我滚动得太快时会发生什么，它会触发具有相同参数的多个 ajax 请求，这会再次导致相同的数据。我对 scrollpagination.js 的滚动功能有疑问，我在这里给你全部内容，所以如果有任何机构可以帮助我，请。
index.php
`<?php $actual_row_count = 400; ?>
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/style.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scrollpagination.js"></script>
<script type="text/javascript">
$(function(){
var actual_count = "<?php echo $actual_row_count; ?>";
$('#quepanel').scrollPagination({
'contentPage': 'loadmore.php', // the url you are fetching the results
'contentData': {},// { AlbumName: "Dirty Deeds", Entered: "5/1/2012" },// these are the variables you can pass to the request, for example: children().size() to know which page you are
'scrollTarget': $(window), // who gonna scroll? in this example, the full window
'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
'beforeLoad': function(){ // before load function, you can display a preloader div
$('#loadMore').fadeIn();
},
'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
$('#loadMore').fadeOut();
//var i = 0;
//$(elementsLoaded).fadeIn(1000);
if ($('#quepanel').children().size() > actual_count ){ // if more than 100 results already loaded, then stop pagination (only for testing)
$('#loadMoreComments').fadeIn();
$('#quepanel').stopScrollPagination();
}
}
});
// code for fade in element by element
$.fn.fadeInWithDelay = function(){
var delay = 0;
return this.each(function(){
$(this).delay(delay).animate({opacity:1}, 200);
delay += 100;
});
};
});
</script>
</head>
<body>
<div class = "maindiv">
<div id = "quepanel" class = "middle">
<?php
$qno = 0;
$limit = 30;
for($i=0 ; $i< $limit ; $i++)
{ ?><div><span class = "srno"><?php echo ++$qno ;?></span><span><?php echo 'hello'.microtime() ;?></span></div>
<?php }?>
</div>
<div id = "loadMore" class = "loadmorediv">
<center><img src = "https://www.google.com/images/loading.gif" /></center>
</div>
<div id = "loadMoreComments" class = "loadmorediv">
<center><span>No More Records</span></center>
</div>
</div>
</body>
</html>
`
loadmore.php
`<?php
$requested_page = $_GET['iteration'];
$limit = 20;
$from = (($requested_page - 1) * $limit);
$qno = $from ;
for($i=0 ; $i< $limit ; $i++)
{ ?>
<div><span class = "srno"><?php echo ++$qno ;?></span><span><?php echo 'hello'.microtime() ;?></span></div>
<?php }?>
`
scrollpagination.js
(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 );`
style.css
`@CHARSET "ISO-8859-1";
body{
font-family:Segoe UI Light,Segoe UI,Tahoma,Arial,Verdana,sans-serif;
font-style: normal;
color: #C76A6A;
color: #0099D2;
color : black ;
}
#loadMoreComments{
background-color : white;
font-weight: bold;
color : black;
border : solid 1px gray;
padding : 5px;
-webkit-border-radius: 1px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
border-radius: 1px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
width : 500px;
margin : 10px auto;
display : none;
}
#loadMore{
margin-left: auto;
margin-right: auto;
display:none;
z-index:2;
}
#quepanel{
padding-top : 10px;
margin-left : auto;
margin-right : auto ;
width: 600px;
}
.maindiv{
width: 960px;
height: auto;
border : red 2px;
margin-left: auto;
margin-right: auto;
background-color: #F8F8F8;
padding : 1px 10px 10px 10px ;
}
.middle{
margin-right : auto;
margin-left : auto;
}
.srno{
width : 30px;
display : inline-block;
text-align: center;
-webkit-border-radius: 45px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
border-radius: 45px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
background-color: rgb(180, 180, 180);
color: #15CFA3;
vertical-align: top;
padding : 5px 0 ;
color : white;
border : 1px gray;
margin-top: 5px;
}
`