JSONP回调和闭包/范围

时间:2012-04-11 14:15:39

标签: javascript jsonp scope

我正在使用http://www.microsofttranslator.com/dev/

中的Microsoft Translation api(AJAX版本)

我遇到了一些关闭和回调的问题,我希望这段代码能够证明:

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"); 

现在,我的回复是

Hola es
Hola fr

在回调有机会执行之前,original变量被覆盖。

如何避免这种情况,以便显示如下内容:

Hola es
Au revoir fr

我试图在不使用jQuery和when()

的情况下这样做

由于

2 个答案:

答案 0 :(得分:3)

嗯,您对每个响应都使用相同的回调函数,因为window. translateComplete只能引用一个函数。因此,每次调用translate都会使用一个新函数覆盖window.translateComplete,这是一个闭包。

您可以为每个调用创建一个名为的新回调。这就是jQuery正在做的事情。

以最简单的形式:

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);
}

答案 1 :(得分:0)

这是因为当您调用“translate”时,您正在重新分配全局“translateComplete”函数。只有一个函数绑定到“window”的单个属性,对吧?

(“原始”变量正在被更改;只是第一个功能,“Au Revoir”,被完全抛弃,在等待被垃圾收集时漫无目的地漂浮。)