usage of javascript closure function

Question

I am trying to figure out how to work with a closure function. On a click event, I want to determine values of parm1 and parm2 and display them in a div, then update new values to an table with an SQL statement.

If user clicks repeatedly, I want to throttle (debounce) and only perform SQL update 5 seconds after user stops clicking. However, display of parm1 and parm2 should occur on each click.

I am unsure of how to pass the parms to the SQL process.

(function() {
  // create debounced function
  var d_process = $.debounce(SQLprocess, 5000);

  $('#myButton').click(function() {
    // determine parameters
    var parm1 = 1 + 1;                       // edit: added var
    $(".div_1").text(parm1);

    var parm2 = 2+2;                      // edit: added var
    $(".div_2").text(parm2);

    d_process();
  });
}());


function SQLprocess(parm1, parm2) {
  //perform an SQL update
}

Reference: http://code.google.com/p/jquery-debounce/

Answer 1

To pass SQLprocess with parameters to the debounce function, change this:

var d_process = $.debounce(SQLprocess, 5000);

to this:

var d_process = $.debounce(function() {SQLprocess(parm1, parm2)}, 5000);

This creates an anonymous function with no parameters that is passed to debounce. But that anonymous function calls SQLprocess with the right parmeters.

---

Some people ask why you can't do this:

var d_process = $.debounce(SQLprocess(parm1, parm2), 5000);

The answer is because, in the Javavscript language, SQLprocess(parm1, parm2) is a function call. It will execute that function immediately and pass the return value to $.debounce() which is not what you want. $.debounce is expecting a function with no arguments so that's what you have to pass it. The way to get your arguments to SQLprocess is to wrap that in a function that has no arguments. It does not have to be an anonymous function. It could also be like this with a named function if you want:

function myFunctionWrapper() {
    SQLprocess(parm1, parm2);
}

var d_process = $.debounce(myFunctionWrapper, 5000);