我有一个烦人的小问题。我有一段代码,它从page2加载内容并将其附加到#content
。这是有效的,但有时会发生两次,然后在第2页之前追加第3页。这是因为在第3页,只有一个帖子,但在第2页,有4个帖子。
如何让我的代码等到追加完成后再运行?这是我的代码:
$(window).scroll(
function(){
if(browserName != "safari") {
var curScrollPos = $('html').scrollTop();
}
else {
var curScrollPos = $('body').scrollTop();
}
if(curScrollPos > 218) {
$("#sidebar").addClass("open");
}
if(curScrollPos < 218) {
$("#sidebar").removeClass("open");
}
var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
if(scrollBottom == 0) {
if(home != 0 || search != 0 || category != 0) {
if(currentPage < numPages) {
$("#main .loader-posts").fadeIn();
currentPage++;
if(search == 1) {
var getPostsUrl = "page/"+currentPage+"/?s="+searchTerm;
}
else {
var getPostsUrl = "page/"+currentPage;
}
$.get(getPostsUrl, function(data) {
$("#main .loader-posts").fadeOut(
'slow',
function(){
var newPosts = $(data).find("#content").html();
$("#content").append(newPosts);
$('#container.tiles').masonry('reload');
});
});
}
}
else {
}
}
添加一个变量,跟踪是否加载下一个页面,然后仅在当前未加载其他页面时加载。这是你问题的根源。.scroll()
可以在加载下一节之前激发两次,只要currentPage < numPages
,它就会增加currentPage
并再次加载。而且,由于.get()
是异步的,因此不能保证在任何后续请求之前完成第一个.get()
请求。添加loading
状态可以修复此问题。
var loading = 0; // Loading state
if (scrollBottom == 0) {
if (home != 0 || search != 0 || category != 0) {
if (currentPage < numPages && !loading) { // Only proceed if not loading
loading = 1; // We have initiated loading
$("#main .loader-posts").fadeIn();
currentPage++;
if (search == 1) {
var getPostsUrl = "page/" + currentPage + "/?s=" + searchTerm;
} else {
var getPostsUrl = "page/" + currentPage;
}
$.get(getPostsUrl, function(data) {
$("#main .loader-posts").fadeOut('slow', function() {
var newPosts = $(data).find("#content").html();
$("#content").append(newPosts);
$('#container.tiles').masonry('reload');
loading = 0; // We are done loading
});
});
}
} else {
}
}
也许您可以在$.get()之前添加一个可以检查的isBusy标志,并在$.gt()回调中将其设置为false?