Setting up longpolling

Question

JavaScript is the language everyone uses without bothering to learn it first, and I'm no exception. I'm trying to set up autorefresh with longpolling. What I have on the client side is the following:

var getAjaxer = function(element) {
 return function() {
 $.ajax({
 url: "/path/to/resource",
 success: function(response) {
 element.html(response);
 },
 dataType: "html",
 timeout: 10000,
 type: "POST",
 complete: arguments.callee
 });
 };
}
var startAjaxing = function() {
 myajaxer = getAjaxer($("#myid"));
 myajaxer();
}
$(startAjaxing);​

This works, but I'm worried I might be doing it all wrong. Could I get some pointers on how I could use the language more effectively?

Answer 1

I can't say whether yours is right or wrong but there were a couple of things that seemed odd to me.

I wouldn't add functions to variables unless you intend to use them more than once. (or it adds to the readability)

var startAjaxing = function() {
 myajaxer = getAjaxer($("#myid"));
 myajaxer();
}
$(startAjaxing);

then becomes:

$(function() {
 getAjaxer($("#myid"))();
}); // Start ajaxing

Also I would get rid of arguments.callee and get the element every time:

var getAjaxer = null;
getAjaxer = function(elementid) {
 return function() {
 $.ajax({
 url: "/path/to/resource",
 success: function(response) {
 $("#" + elementid).html(response);
 },
 dataType: "html",
 timeout: 10000,
 type: "POST",
 complete: getAjaxer(elementid);
 });
 };
}

To ME this seems easier to read butt it may be only a matter of taste. (PS. I didn't check this for syntax errors etc.)

If you don't want to create functions every time?

getAjaxer = function(elementid) {
 var elementAjaxer = $("#" + elementid).data("ajaxer");
 if(elementAjaxer == null){
 elementAjaxer = function() {
 $.ajax({
 // etc etc
 });
 };
 $("#" + elementid).data("ajaxer", elementAjaxer);
 }
 return elementAjaxer;
}