Function callback issue
Function callback issue
Hello,
Over the past few weeks I have been getting into jQuery quite a bit, and have been getting a better understanding of how to use it effectively. I have however ran into quite a serious problem when developing a "shoutbox" type of comment system. It's taken me a while to get every nitty gritty bit working fine, so I hope the solution doesn't involve rewriting the whole thing!
The problem I have is that I cannot get the script to wait for a function to finish (i.e. run with a callback), because the function I am calling is a function I have made, i.e. not that of jQuery. I have a setInterval running for a commentRefresh() function that polls via AJAX for any new posts. I also have a .submit(function() {}) bind running for the submit button on my shoutbox form which handles the submission of shouts, also via AJAX.
I am attempting to run the commentRefresh() function
before continuing with the submission, just so I don't lose out on any other submissions that were handled prior to the commentRefresh() function running. The problem is that I never knew that the script never waited for the commentRefresh() function to finish before continuing with the submission, so this means that I sometimes end up with duplicate entries on the page, one from the forced commentRefresh() and the other from the interval one.
As you can see from the code below, I have tried to use variables to help stop the function from running if I am in the process of submitting, but if the commentRefresh is midflow in AJAX, then it will not take this into account.
-
$(function() {
//Controller for adding new comment
$('#sb_form').submit(function() {
var sbName = $('#sb_name').val();
var sbMessage = $('#sb_message').val();
if ((sbName == '') || (sbMessage == '')) {
$('#shoutbox-error').html('Error: You did not fill in your name or message').fadeIn();
return false;
}
var oldSubmit = $('#sb_submit').val();
$('#sb_submit').attr('disabled', 'disabled').val('Adding..');
getting = false;
//Get the newest shouts so we don't lose previous ones on refresh
//alert('Pre-post checking');
var runRefresh = commentRefresh();
adding = true;
var ajaxOpts = {
type : 'post',
url : addUrl,
dataType : 'json',
data : { 'sb_name' : sbName, 'sb_message' : sbMessage, 'sb_lang' : lang },
complete : function() {
$('#sb_submit').removeAttr('disabled').val(oldSubmit);
},
success : function(data) {
if (data.error == undefined) {
$('#sb_message').val('');
limitPost($('#sb_message'));
//console.log('No error found');
$('#shoutbox-error').fadeOut().html();
//Get the shout
runRefresh = commentRefresh();
//alert('Updating posts end');
} else {
//console.log('Error: '+data.error);
$('#shoutbox-error').html(data.error).fadeIn();
}
//console.log('Nothing');
}
};
$.ajax(ajaxOpts);
return false;
});
//Controller for getting new comments
function commentRefresh() {
if (!getting) {
//alert('Started getting comments');
if (adding) {
//Prevent immediately grabbing duplicates from a newly added comment
adding = false;
return;
}
getting = true;
var lastId = $('#shoutbox-shouts li:first-child').attr('id');
$.getJSON(getUrl+'?lastId='+lastId+'&lang='+lang+'&jsoncallback=?', function(data) {
if (data.length > 0) {
//console.log('We found '+data.length+' new shouts!');
for (var x = 0; x < data.length; x++) {
//Add new shout code is here
}
} else {
//console.log('No shouts this time');
}
getting = false;
});
}
}
setInterval(commentRefresh, 10000);
});
I know this is a big post, and I will be very thankful for any one who takes their time to read it and help me.
Many thanks,
Ashley.