JavaScript回调函数的作用域？

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).

Answer 1

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.