Adding context to a context-less Javascript callback

Question

I am using a third-party JavaScript library that has a certain long-running function (it involves web service calls over the network, etc). For simplicity, let's say it takes one parameter, a callback function to call when the long-running operation completes, so let's say we have the signature longRunningFunction(callback).

Unfortunately, the function does not accept a "context" parameter, so if I call longRunningFunction multiple times, when my callback is called I have no way of knowing which call resulted in which callback.

I found the following way to solve this, by using anonymous functions: Define a mycallback(context) function, and then do something like this every time I invoke the long-running operation:

uniqueContext = getUniqueContextFromSomewhere();
longRunningFunction(function() {mycallback(uniqueContext)});

This seems to work, but my question is whether or not this is guaranteed to work according to the JavaScript spec in all possible circumstances, given that the long-running operation may be executing on a different thread, callbacks to the various calls to longRunningFunction may come in any order, etc. So, is the solution I found valid?

Answer 1

You can provide another context using Function.prototype.bind(thisArg [, arg1 [, arg2, …]]). bind returns a new method that, when called, has its this keyword set to thisArg. In your case:

longRunningFunction(mycallback.bind(uniqueContext));

This does not work in older browsers (IE less than 9 for example) but you could use a polyfill or library like Underscore.js. To learn more about bind I reccomend the following resources:

• Mozilla documentation
• Getting Out of Binding Situations in JavaScript
• JS101: Call, Apply, and Bind

Answer 2

Assuming this code :

function longRunningFunction( fn ) {
    window.setTimeout( fn, 1000 ); // just to make it async
}

function myCallback( context ) {
    /* ... */
}

Now if you have this :

var uniqueContext = getUniqueContext( );
longRunningFunction( function ( ) { myCallback( uniqueContext ); } );

It is specified by the standard that the context parameter of myCallback will be uniqueContext at the moment where the callback will be fired. It can cause some issues when you try something like this in a loop (because you will erase uniqueContext at each iteration).

If you do this :

var uniqueContext1 = getUniqueContext1( );
longRunningFunction( function ( ) { myCallback( uniqueContext1 ); } );

var uniqueContext2 = getUniqueContext2( );
longRunningFunction( function ( ) { myCallback( uniqueContext2 ); } );

The callback using uniqueContext1 is garanteed to be called when the first longRunningFunction will end, and the one using uniqueContext2 when the second longRunningFunction will end (with the same restriction than before; if you overwrite uniqueContext1 or uniqueContext2 somewhere in your scope, the callback parameter will change too).

Using bind allows you to avoid creating a closure (and the default previously mentioned). The following code is similar to the previous one, except that you will never be able to accidentally change the value of the parameter by overwriting the previous one :

longRunningFunction( mycallback.bind( null, getUniqueContext1( ) ) );
longRunningFunction( mycallback.bind( null, getUniqueContext2( ) ) );

mycallback.bind( null, someParameter ) will return a function which, when called, will call mycallback with null as this (which will fallback to window like any regular function) and someParameter as first parameter.

The other answer is using only the first parameter of bind because they use the this variable, but it is not required and you can safely use function parameters instead.