I'm trying
$.ajax({
// ...,
async: false,
});
but it doesn't help. There is a way with flag(true/false), but maybe there is more beautiful way how can i do it?
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 220) {
// ..
sendRequest();
// ..
}
});
This function makes an AJAX request.
In our app we add ajax requests to a queue and then pop them off and execute them one by one. Here is a very simplified version...
var queue = [];
function queueAdd( options ) {
// ADD AJAX OPTIONS TO QUEUE ARRAY
queue.push( options );
// START QUEUE RUNNING
queueRun();
}
function queueRun() {
// QUEUE EMPTY OR REQUEST ALREADY ACTIVE
if ( !queue.length || activeRequest ) return;
// REMOVE FIRST REQUEST FROM QUEUE
var request = queue.shift();
// ATTACH COMPLETE CALLBACK
request.complete = function( data ) {
// ACTIVE REQUEST COMPLETED
activeRequest = false;
// START NEXT REQUEST IN QUEUE
queueRun();
// OPTIONALLY EXECUTE ORIGINAL COMPLETE CALLBACK
request.complete( data );
};
// PREVENT CONCURRENT REQUESTS
activeRequest = true;
// EXECUTE AJAX REQUEST
$.ajax( request );
}