Chrome Extension callback functions and concurrency

Question

I'm learning to code Chrome Extensions and I'm curious about passing parameters into asynchronous functions and a possible concurrency issue. Let me give you an example:

function updateActiveTab(param1)
{
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
    {
        onUpdatingTab(tabs[0].id, param1);
    });
}

function onUpdatingTab(tabID, param1)
{
    console.log("Tag ID=" + tabID + ", param=" + param1);
}

So, lets assume that the first time my updateActiveTab() method is called with param1=1 and the call to chrome.tabs.query() takes a while. In the meantime, while chrome.tabs.query() is still being processed, my updateActiveTab() method is called again with param1=2. What would happen when the first call to chrome.tabs.query() returns and begins processing its callback function? Will param1 be 1 or 2?

I'm obviously looking to pass my param1 as 1, and 2, and so on, to its function's respective calls.

@RobW: Idk. I'm just asking. I come from C++ development where concurrency may be an issue. — c00000fd, Sep 04 '14 at 20:51
@RobW: Well, not anymore: https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers — c00000fd, Sep 04 '14 at 21:00
@RobW: And if so, how else would it run methods asynchronously? — c00000fd, Sep 04 '14 at 21:01
Web Workers are still single threaded. They communicate with the main thread via events. JavaScript methods can be run asynchronously because of the "message loop" (should be a familiar term to you if you're used to C++ and IPC).. — Rob W, Sep 04 '14 at 21:02
@RobW: Oh, I see. That's a good explanation that I totally understand. I'm glad to hear this because it's a b*&^% to deal with multithreaded synchronization. — c00000fd, Sep 04 '14 at 21:06

score 1 · Accepted Answer · answered Sep 04 '14 at 20:36

The short answer is that you will win. Read up on JavaScript closures to really understand what's going on here. I'll hit the highlights so you get the idea.

The reference to param1 inside of onUpdatingTab forces param1 into a closure. The closure keeps the value of param1 alive as long as it is needed by calls to inner functions. The scenario you describe will create two different closures, one for each call to onUpdatingTab.

Here's an example adapted from JavaScript: The Good Parts that illustrates this aspect of closures. This function takes an array of DOM nodes and adds an onclick handler that displays the ordinal of the node:

function add_the_handlers = function (nodes) {
    var helper = function(i) {
        return function(e) { alert(i); };
    };
    var i;
    for (i = 0; i < nodes.length; i += 1) {
        nodes[i].onclick = helper(i);
    }
}

Each call to helper returns a function where the reference to "i" is bound to the closure for that helper call. Note the semantic distinction with code that doesn't use the helper, but just does this:

        nodes[i].onclick = function() { alert(i); }

Here "i" again binds to a closure, but it's the closure associated with the call to add_the_handlers, so clicking on each node displays the same value, which is the number of nodes not the ordinal. That's the last value assigned to "i".

Here's a good explanation of JS closures: http://stackoverflow.com/questions/111102/how-do-javascript-closures-work — ahmd0, Sep 04 '14 at 21:40

Chrome Extension callback functions and concurrency

1 Answers1