JSONP回调和闭包/范围

Question

I am using the Microsoft Translation api (AJAX Version) from http://www.microsofttranslator.com/dev/

I am having some issues with closures and callbacks, which I hope this code will demonstrate:

function translate(original){

    window.translateComplete = function(language) {

        if (language!="en"){
        alert(original +" "+language);
        }   
    }


    var windowsliveid = 'API_KEY_REMOVED';
    var el = document.createElement("script"); 
    el.src = 'http://api.microsofttranslator.com/V2/Ajax.svc/Detect'; 
    el.src += '?oncomplete=translateComplete'; 
    el.src += '&appId=' + windowsliveid; 
    el.src += '&text=' + escape (original); 
    document.getElementsByTagName('head')[0].appendChild (el);

}

translate("Au Revoir"); 
translate("Hola"); 

Now, my response comes back as

Hola es
Hola fr

The original variable is being overwritten, before the callback has had a chance to execute.

How do I avoid this so that it displays something like:

Hola es
Au revoir fr

I am trying to do this without using jQuery and when()

Thanks

Answer 1

Well, you are using the same callback function for every response, since window. translateComplete window. translateComplete can only refer to one function. So every call to translate will overwrite window.translateComplete with a new function, which is a closure.

You could create a new callback with a different name for each call. That's what jQuery is doing.

In it's simplest form:

var i = 0; // some running variable
function translate(original){

    var cb_name = 'cb' + (i++); // create a new name
    window[cb_name]= function(language) {
        delete window[cb_name]; // remove function to not pollute the global scope
        if (language!="en"){
            alert(original +" "+language);
        }   
    }

    var windowsliveid = 'API_KEY_REMOVED';
    var el = document.createElement("script"); 
    el.src = 'http://api.microsofttranslator.com/V2/Ajax.svc/Detect'; 
    el.src += '?oncomplete=' + cb_name; // use the dynamic name instead
    el.src += '&appId=' + windowsliveid; 
    el.src += '&text=' + escape (original); 
    document.getElementsByTagName('head')[0].appendChild (el);
}

Answer 2

It's because you're re-assigning the global "translateComplete" function when you call "translate". There can only be one function bound to that single property of "window", right?

(The "original" variable is not being changed; it's just that the first function, with "Au Revoir", is cast off completely to float around aimlessly while waiting to be garbage collected.)