我正在用php和api做无限的ajax滚动,但我的数据是重复的。我不想在用户在页面末尾时加载数据(完美运行)。当用户到达某个div(check_onload),然后加载数据时,我想要的是什么,但在这种情况下,数据是repeating.Here,在我的代码下面,我如何停止重复数据。
<div id="post-data"></div>
<div style="display:none;" class="ajax-load"></div>
<div class="check_onload"></div>
<script type="text/javascript">
///this run Perfectly
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
var token = $(".tokenId").val();
GetMoreData(token);
}
});
///Repeating or duplication the data
$(window).on('scroll',function() {
if (checkVisible($('#check_onload'))) {
var token = $(".tokenId").val();
GetMoreData(token);
} else {
}
});
function checkVisible( elm, eval ) {
eval = eval || "object visible";
var viewportHeight = $(window).height(), // Viewport Height
scrolltop = $(window).scrollTop(), // Scroll Top
y = $(elm).offset().top,
elementHeight = $(elm).height();
if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
if (eval == "above") return ((y < (viewportHeight + scrolltop)));
}
function GetMoreData(token){
$.ajax(
{
url: '/loadMoreData.php?token=' + token,
type: "get",
beforeSend: function()
{
$('.ajax-load').show();
}
})
.done(function(data)
{
$('.ajax-load').hide();
$("#post-data").append(data.html);
$("#tokenId").val(data.token);
})
.fail(function(jqXHR, ajaxOptions, thrownError)
{
alert('server not responding...');
});
}
</script>
发布于 2018-08-20 05:12:40
您有两个窗口滚动事件被触发,导致重复,因为您使用相同的令牌从服务器请求数据两次,每次用户滚动页面。我将不得不假设删除其中的1个将解决您的问题。
在没有看到服务器代码的情况下,这是唯一的解决方案。
https://stackoverflow.com/questions/51915080
复制相似问题