0
我正在忙於製作一個懶惰的加載程序類型函數,當用戶到達某個div的底部時加載一組新的數據。當動態創建新div時,滾動函數觸發太多時間 - AJAX JQUERY
每當它增加新的內容時,計數器會因爲某種原因觸發太多時間,如果添加了兩個新的容器,那麼它會觸發計數器兩次,如果增加了4個容器,則計數器觸發4次等等...
我似乎無法找到數據丟失的地方。也許別人可以幫忙!
如果需要,我還附加了一個指向JSON數據文件的鏈接。請讓我知道如果你需要更多的東西!
CODE -
//AJAX FUNCTIONS
var imgTitle;
var imgLink;
var url = 'http://www.capetownetc.com/api/get_category_posts/?slug=news&count=10&page=';
var counter = 1;
function postCards(pageNumber, cardLimit, container) {
$.ajax({
type: 'GET'
, url: url + pageNumber
, data: {
get_param: 'value'
}
, dataType: 'jsonp'
, success: function postPop(data) {
$('.swiper-slide').append('<div class="card-container' + container + '"></div>');
$.each(data.posts, function(i){
imgTitle = data.posts[i].title;
imgLink = data.posts[i].thumbnail_images.medium.url;
$('.card-container' + container).append('<div class="card card1"><img src="' + imgLink + '" class="card-img"><span><h2 class="card-heading">' + imgTitle + '</h2></span></div>');
});
}
});
$(".swiper-slide").scroll(function(){
if($(this)[0].scrollHeight - $(this).scrollTop() === $(this).outerHeight()) {
counter = counter + 1;
postCards(counter, 10, counter);
console.log(counter);
};
});
}
postCards(counter, 10, counter);
console.log(counter);
.swiper-slide {
\t overflow: scroll;
-webkit-overflow: scroll;
height: 535px;
}
/*SWIPER STYLES*/
.page-content{
overflow: scroll;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
height: 88%;
position: relative;
z-index: 1;
}
.swiper-container-h {
height: 100%;
}
.swiper-slide {
background:#fff;
}
.swiper-slide span {
text-align:center;
display:block;
margin:20px;
font-size:21px;
}
.swiper-pagination {
\t top: 0;
height: 55px;
}
.swiper-pagination-bullet{
opacity: 1;
background: #c4c4c4;
}
.swiper-pagination-bullet-active{
background: red;
}
.swiper-container-vertical>.swiper-pagination-bullets{
right: 5px;
top: 2%;
}
.swiper-slide {
\t overflow: scroll;
-webkit-overflow: scroll;
height: 535px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="swiper-wrapper">
<div class="swiper-slide main-slide">
</div>
</div>
因爲每個'明信片()'調用增加了一個新的'scroll'處理程序'.swiper-slide'這就要求'明信片()'這增加了它調用'明信片一個新的'scroll'處理器()' ... – Andreas
謝謝!我覺得很笨!請讓這個答案! – Darian
這幫助我找出問題所在。請讓它成爲答案,以便我可以標記正確!謝謝安德烈亞斯。 – Darian