如何让ajax 延迟加载,如何在延迟加载期间使用JQuery滚动事件处理程序时阻止多个AJAX调用？...

我使用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 = "";

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 = "";

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, size) }, 1500);

} else {

}

}

$('#scrollbox').data('ajaxready', true);

// page load finish

});

function loaddata(form_data, size) {

number = "&size=" + size;

//fetch new items

$.post('dosearch.php', form_data + number, function(newitems) {

if (newitems == '') {} else {

$('#content').append(newitems);

}

});

}