javascript - 处理异步功能的正确方法

注意：如果您认为此帖子应有更好的标题，请告诉我/编辑！

我正在尝试使我创建的ExtJS表单国际化。我在一个文件中有用于表单的javascript，而在另一个JavaScript文件中有这样的翻译：

english.js

function get_i18n(){

    var i18n = {
        Apply                               : 'Apply For Scholarship',
        Student_Information                 : 'Student Information',
        First_Name                          : 'First Name',
        Last_Name                           : 'Last Name',
        Gender                              : 'Gender',
        Male                                : 'Male',
        Female                              : 'Female',
    }

    return i18n;
}

然后在我的form.js中

function getLang(){
     // decode language passed in url
   var locale = window.location.search
                ? Ext.urlDecode(window.location.search.substring(1))
                : '';
   return locale['lang'];
}//end getLang()

var form;

var lang = getLang();
var languageFile;

if (lang == 'chn'){
    languageFile = "chinese.js";
}
else if (lang == 'eng'){
    languageFile = "english.js";
}
else if (lang == 'tib'){
    languageFile = "tibetan.js";
}

function getLabels(file){
    var a = $.getScript(file, function(){
    var b = get_i18n();
    return b;
});
return a;
}//end getLabels()

var i18n = getLabels(languageFile);

Ext.onReady(function(){
    Ext.QuickTips.init();
        form = new Ext.form.FormPanel({
        id: 'scholarshipForm',
        labelWidth: 200, // label settings here cascade unless overridden
        url:'scholarshipSubmit.php',
        method: 'POST',
        frame:true,
        layout: 'form',
        title: 'Apply For Scholarship',
        bodyStyle:'padding:10px 10px 0',
        width: 610,
        itemCls: 'formStyle',
        items: [{
            xtype:'fieldset',
            checkboxToggle:false,
            title: 'Student Information',
            autoHeight:true,
            layout: 'form',
            defaults: {width: 210},
            collapsed: false,
            items :[{
                    xtype: 'textfield',
                    fieldLabel: i18n['First_Name'],  //RIGHT HERE I TRY TO USE THE RESULTS
                    allowBlank:false,
                    name: 'first',
                    maskRe: /([a-zA-Z\s]+)$/,
                    msgTarget: 'side'
                }
...
...
...
        form.render(document.body);

});

玩了一点代码后，我知道我的问题可能与我处理异步jQuery $ .getScript的方式有关。奇怪的是，当我没有尝试从url get变量中获取语言，而是通过直接将文件名提供给$ .getScript来运行我的getLabels函数时，我得到了所需的结果并显示了表单标签相应地。我真的很感谢任何帮助。我还是异步调用的新手，它们总是让我陷入困境：-/。我认为在另一个函数中包含$ .getScript并像这样冒泡返回就可以解决问题，也许可以做到，就像我之前提到的那样，它工作得很好，直到我添加了基于URL $ _GET获取文件名的逻辑。

感谢您的时间，

艾尔莎

编辑

现在我有一个english.json

{i18n: {
        "Apply"                             : 'Apply For Scholarship',
        "Student_Information"               : 'Student Information',
        "First_Name"                        : 'First Name',
        "Last_Name"                         : 'Last Name',
        "Gender"                            : 'Gender',
        "Male"                              : 'Male',
        "Female"                            : 'Female'
}
}

我正在尝试这样做：

var i18n = {};
function getLabels(file){

    $.getJSON(file, i18n, function(data) { i18n = data.i18n; return i18n;});
    return true;
}
getLabels(languageFile);

我需要从该回调函数中获取一个i18n对象，我可以这样使用它：
i18n.First_Name等

最佳答案

您不能从这样的回调处理程序返回值。好吧，如果您愿意，可以这样做，但是这样做没有任何好处。

取而代之，最简单的方法是重新排列代码，以使在完成“ .getScript（）”之后您需要做的所有事情就是在回调函数内的代码。

因此，类似：

function getLabels(file){
    $.getScript(file, function(){
       var i18n = get_i18n();

       Ext.onReady(function() {
         // all that stuff
       });
    });

}//end getLabels()

我根本不了解Ext.js，因此不确定“ onReady”调用是否正确。关键是在“ .getScript（）”回调内部，您可以可靠地使用所获取脚本中的代码。