处理异步功能的正确方法

Question

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

我正在尝试使我创建的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等

Answer 1

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

取而代之的是，做最简单的事情就是刚刚重新安排代码，这样，所有你需要后 “.getScript（）”完成做的东西是正确的代码将出现回调函数内 。

因此，类似：

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

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

}//end getLabels()

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

Answer 2

也许不是将语言代码放入javascript函数中，而是为什么不将其放入JSON格式的文件中，这将允许您使用jQuery函数将JSON加载到适当的对象中，而您的代码可以使用它。

Answer 3

Ajax是异步的，这意味着您无法从回调函数返回值。

但是，您可以提供另一个回调函数作为参数。 然后将使用您所需的数据作为参数执行该回调。

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


getLabels(languageFile, function(i18n) {
    // do something with the data
});