我使用3种不同的函数将数据加载到我的DIV中.我正在尝试阻止多个
AJAX调用,当浏览器滚动条保持在我懒惰加载数据的DIV底部时.
这有效但有时(有时候)滚动器仍然在我的div的底部,这将导致许多AJAX调用发生.我该如何防止这种情况发生？
$(document).ready(function() {
//form submit by click
$("#submit").click(function(e) {
// Prevent Default Action In Case to Load data by form
e.preventDefault();
//prevent select to post empty data
$('select').each(function() {
if ($(this).val() == '') {
$(this).attr('disabled','disabled');
}
});
// Define what we need
var loading = "<img src='/zojfa/images/loading.gif' alt='Loading...' />";
var scrolltop = $('#scrollBox').attr('scrollTop');
var scrollheight = $('#scrollBox').attr('scrollHeight');
var windowheight = $('#scrollBox').attr('clientHeight');
var post = $(this).attr("name") + "=" + $(this).val();
var form_data = $('#search_form').serialize() + "&" + post;
var scrolloffset = 20;
//empty content if another value sent to code
$('#content').empty();
//load data
loaddata(form_data,0);
});
//listen to scroll function
$('#scrollBox').scroll(function() {
//define what we need
var scrolltop = $('#scrollBox').attr('scrollTop');
var scrollheight = $('#scrollBox').attr('scrollHeight');
var windowheight = $('#scrollBox').attr('clientHeight');
var scrolloffset = 20;
//get number of div which will append to script in case of limit database to page 2 or 3 or...
size = $('#content > div').children().size();
//if we reach to bottom of div we are going to call to ajax function
if (scrolltop >= (scrollheight - (windowheight + scrolloffset))) {
var form_data = $('#formdata').val();
//if remain of size(count of div) is 0 then we have more data to show because we limit data provided by script to 7 field(we handle situation that we had 14 or 21 respond from database in "next step" because if there is no data to show we dont have to let script to run)
if (size % 7 == 0) {
//call to load data function
setTimeout(function() { loaddata(form_data,size) },1500);
} else {
//do nothing its just in case we need to append something like no more data to load
}
}
});
// page load finish
});
//function to load data
function loaddata(form_data,size) {
number = "&size=" + size;
//fetch new items
$.post('dosearch.PHP',form_data + number,function(newitems) {
//next step : if page echoing "" then do nothing
if (newitems == '') {} else {
//if we have data append these data to our div's #content
$('#content').append(newitems);
}
});
}
更新
亲爱的@Kent Pawar和亲爱的@ E.J. Brennan说但是现在当我到达div的底部时我得到了更多的AJAX调用,但它仍然不能正常工作.
$("#submit").click(function(e) {
// Do some Default
e.preventDefault();
$('select').each(function() {
if ($(this).val() == '') {
$(this).attr('disabled','disabled');
}
});
// var what we need
var loading = "<img src='/zojfa/images/loading.gif' alt='Loading...' />";
var scrolltop = $('#scrollBox').attr('scrollTop');
var scrollheight = $('#scrollBox').attr('scrollHeight');
var windowheight = $('#scrollBox').attr('clientHeight');
var post = $(this).attr("name") + "=" + $(this).val();
var form_data = $('#search_form').serialize() + "&" + post;
var scrolloffset = 20;
$('#content').empty();
//load data
loaddata(form_data,0);
$('select').each(function() {
if ($(this).val() == '') {
$(this).removeAttr('disabled');
}
});
});
$('#scrollBox').scroll(function() {
//var what we need
var scrolltop = $('#scrollBox').attr('scrollTop');
var scrollheight = $('#scrollBox').attr('scrollHeight');
var windowheight = $('#scrollBox').attr('clientHeight');
var scrolloffset = 20;
// when we reach
size = $('#content > div').children().size();
if ($('#scrollBox').data('ajaxready') === false)
return;
if (scrolltop >= (scrollheight - (windowheight + scrolloffset))) {
$('#scrollBox').data('ajaxready',false);
var form_data = $('#formdata').val();
if (size % 7 == 0) {
setTimeout(function() { loaddata(form_data,1500);
} else {
}
}
$('#scrollBox').data('ajaxready',true);
// page load finish
});
function loaddata(form_data,function(newitems) {
if (newitems == '') {} else {
$('#content').append(newitems);
}
});
}
解决方法
问题不在于滚动条位于页面底部,而是事件处理程序的工作方式.有时滚动器会位于页面的底部,就像没有更多帖子要加载一样…例如,观察Facebook的墙壁.
目前,滚动发生时会触发JQuery scroll事件.
JQuery docs:
A scroll event is sent whenever the element’s scroll position changes,
regardless of the cause. A mouse click or drag on the scroll bar,
dragging inside the element,pressing the arrow keys,or using the
mouse’s scroll wheel Could cause this event.
现在,您的脚本的作用是进行单个AJAX调用以检查是否有要加载的内容.您需要修改脚本以阻止在此期间发生多个AJAX调用,并且正如我看到@ E.J. Brennan已经提出了同样的建议:).
您可以添加标志,如下所示：
//listen to scroll function
$('#scrollBox').scroll(function(){
//[Kent] Before we service the event,we check if the last scroll event was handled/completed.
//If it is not yet compelted,don't start another one and jump out of the code.
if ($(window).data('ajax_in_progress') === true)
return;
//define what we need
var scrolltop=$('#scrollBox').attr('scrollTop');
var scrollheight=$('#scrollBox').attr('scrollHeight');
var windowheight=$('#scrollBox').attr('clientHeight');
var scrolloffset=20;
//get number of div which will append to script in case of limit database to page 2 or 3 or...
size = $('#content > div').children().size();
//if we reach to bottom of div we are going to call to ajax function
if(scrolltop>=(scrollheight-(windowheight+scrolloffset))){
$(window).data('ajax_in_progress',true); //[Kent] prevent more scroll events as AJAX request will soon begin.
var form_data = $('#formdata').val();
// if remain of size(count of div) is 0 then we have more data to show because
// we limit data provided by script to 7 field(we handle situation that we had
// 14 or 21 respond from database in "next step" because if there is no data to
// show we dont have to let script to run)
if(size % 7 == 0){
//call to load data function
setTimeout(function(){loaddata(form_data,size)},1500);
}else{
//do nothing its just in case we need to append something like no more data to load
}
}
});
//function to load data
function loaddata(form_data,size){
number = "&size=" + size;
//fetch new items
$.post('dosearch.PHP',form_data+number,function(newitems){
// [Kent] This is the callback funciton that gets executed ONLY
// when the AJAX request has completed. We will append the data
// into the DOM and then reset the FLAG.
//next step : if page echoing "" then do nothing
if(newitems == ''){
}else{
//if we have data append these data to our div's #content
$('#content').append(newitems).each(function() {
//Adding a callback to append.
// So we reset the flags here to indicate the scroll event
// has been handled/completed and so we turn scrolling events back on
$(window).data('ajax_in_progress',false);
});
}
});
}