Javascript callback function scope?

Question

I have a javascript function that has a callback then an anonymous function then another callback, and something has gone wrong with the scope. The parameter callbackFunc is retaining its value from the first function call and not using the new value passed in the 2nd function call.

function IsReady(callbackFunc) {   
    if (!IsValid()) return false;
    IsConnected(function () {
        if (typeof (callbackFunc) == 'function')
            callbackFunc();
        return true;
    });    
}

function IsConnected(validCallbackFunc) {
$.post("IsConnected", function (data) {
    if (data.IsValid) {
        if (validCallbackFunc && typeof (validCallbackFunc) == 'function')
            validCallbackFunc();
    }
});
}

$('#SaveButton').click(function () {
    IsReady(SaveInvoice); // works       
});

$('#ExportButton').click(function () {
    // works only if IsConnected() is true     
    // otherwise SaveInvoice is called again
    IsReady(ExportInvoice);  
});

function SaveInvoice() {}
function ExportInvoice() {}

In some circumstances, when I click the ExportButton, the SaveInvoice function is run instead of the ExportInvoice function. I'm guessing that it's a scoping issue - that somehow the old value of callbackFunc has been retained. But I don't quite understand it due to the mix of callback + anonymous function + another callback. I didn't write this code, but I have to fix it. Is there anything I can do to clear the value of callbackFunc at the end of IsReady()?

IsReady(ExportInvoice) works if IsConnected() is true. If IsConnected() is false then the result is that SaveInvoice() gets executed when in fact nothing should happen (because it is not connected).

Your javascript looks fine. Your understanding of returning true/false doesnt work though. Returns statements dont cascade as you expect, nothing handles the return values. — Raynos
– Raynos, Commented Apr 2, 2011 at 23:08
Not my code lol. Yeah the return does nothing. But that doesnt explain why SaveInvoice is called when the ExportButton is clicked. I've removed the unnecessary returns. — JK.
– JK., Commented Apr 2, 2011 at 23:25
I think the key of your problem is "In some circumstances" meaning. In other words, can you give the exact steps that reproduce the problem? — Pierre
– Pierre, Commented Apr 3, 2011 at 0:09

Pierre · Accepted Answer · 2011-04-03 01:06:31Z

There is no way that the callbackFunc value could be retained between two different calls of the IsReady function.

In your code, each time a click event handler is executed, a new scope is created when IsReady is called. Each scope has it's own local parameter callbackFunc. Each scope will define its own anonymous function passed to IsConnected where resides the callbackFunc variable enclosed in a closure.

So this is not a scope problem.

To prove it, I emulated your code here: http://jsfiddle.net/pwJC7/

In your code you talk about the IsConnected return value. This function actually does not return anything. The connection status seems to be checked through an ajax call returning an XML or JSON data with an IsValid property (emulated by $_post in the fiddle).

Maybe your issue is due to this asynchronous call. But it's impossible that you experience a call to SaveInvoice function as a consequence of a click to ExportInvoice button with the JavaScript code you provided.

Collectives™ on Stack Overflow

Javascript callback function scope?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related