How pass parameters to downstream function with done() or next()

Question

I am new to next(), done() etc. and am struggling with propagating parameters between serial executions/chaining of possibly otherwise asynchronous functions.

I want to force serial execution of 2 functions so they can be called with something like either:

f1('#{arg1a}', '#{arg1b}').done(
  f2('#{arg2a}', '#{arg2b}')
);

OR something like:

f1('#{arg1a}', '#{arg1b}', '#{arg2a}', '#{arg2b}').done(f2);

Where the arg values passed in are gleaned from query parameters using JSF.

Note that:

• arg2a and arg2b are in my case completely unrelated to arg1a and arg1b, and the invocation of f2 does NOT depend in any way on what happens in f1, other than it must execute strictly afterwards, even if f1 is otherwise usually asynchronous.

• I am not defining on-the-fly anonymous functions or such inside done() here (yet), I want to be able to call a library-defined function with some known params.

In this example, the functions would be something like:

function f1(arg1a, arg1b) {

   //do something with arg1a, arg1b

  return $.Deferred().resolve();
}

function f2(arg2a, arg2b) {
  // Do something with arg2a and arg2b AFTER f1 has fully run.
}

OR something like:

function f1(arg1a, arg1b, arg2a, arg2b) {

   //do something with arg1a, arg1b

  // Somehow ensure f1 is finished then execute f2(arg2a, arg2b)
}

function f2(arg2a, arg2b) {
  // Do something with arg2a and arg2b AFTER f1 has fully run.
}

Just using callback chaining did not work for the situation I am tackling. See also: How link to and target/open a p:tab within an p:accordionPanel within a p:tab within a p:tabview

An acceptable answer MUST permit me to have a pre-defined function f2 with pre-defined parameters

Answer 1

You need to pass parameters to .resolve(), then use .then()

function f1(arg1a, arg1b) {

  return $.Deferred(function(dfd) {
    //do something with arg1a, arg1b
    // you can alternatively call `.resolve()` without passing parameters
    // when you are finished doing something with `arg1a`, `arg1b`,
    // which should call chained `.then()` where `f2` is called
    dfd.resolve(arg1a, arg1b)
  }).promise();
}

function f2(arg2a, arg2b) {
  // Do something with arg2a and arg2b AFTER f1 has fully run.
}

f1(arg1, arg2)
.then(function() {
  // call `f2` here
  f2('#{arg2a}', '#{arg2b}');
})
// handle errors
.catch(function(err) { // alternatively use `.fail()`
  console.log(err)
});

jsfiddle https://jsfiddle.net/wuy8pj8d/

Answer 2

You've almost got it right except you've forgotten to wrap the code you want to execute in the future (when done is eventually called) inside a function:

f1('#{arg1a}', '#{arg1b}').done(function(){
  f2('#{arg2a}', '#{arg2b}')
});

This also works with regular callbacks. For example, say you've defined f1 to accept a callback instead of a promise, you'd then do:

f1('#{arg1a}', '#{arg1b}',function(){
  f2('#{arg2a}', '#{arg2b}')
});

Nothing special here. There's no separate syntax for forcing callbacks to accept custom arguments, just wrap it in another function.

This also works for variables thanks to closures:

var a='#{arg1a}', b='#{arg1b}';
var c='#{arg2a}', d='#{arg2b}';

f1(a,b).done(function(){
  f2(c,d)
});

The variables c and d will be accessible within done().