Question

I would like to update some data with JSON when the user clicks on an object. What I came up with is the following double closure.

var buildGetJSON = function(m,t,p,u) { 
  return function ()  {
    var buildUpdateParticipants = function(m,t,p) {
      return function(data) { updateParticipants(m,t,data,p); };
    };
    $.getJSON(u, buildUpdateParticipants(m,t,p));
  };
};
marker.on("click", buildGetJSON(marker, title, popmsg, url));

It works, but made me wonder if there is a more concise way to put this than writing a closure variable for the two function calls. Any hints?

Answer 1

Yes, the second closure is redundant.

function buildGetJSON(m,t,p,u) {
  return function() {
    $.getJSON(u, function(data) {
      updateParticipants(m,t,data,p);
    });
  };
}
marker.on("click", buildGetJSON(marker,title,popmsg,url));

If you’re only using buildGetJSON once, you can further simplify it by making buildGetJSON anonymous.

marker.on("click", function(m,t,p,u) {return function() {
  $.getJSON(u, function(data) {
    updateParticipants(m,t,data,p);
  });
};}(marker,title,popmsg,url));

Here’s another way to do it entirely with anonymous functions. It doesn’t collapse into as few lines, but I think it looks a little clearer.

!function(m,t,p,u) {
  marker.on("click", function() {
    $.getJSON(u, function(data) {
      updateParticipants(m,t,data,p);
    });
  });
}(marker,title,popmsg,url);