处理异步函数的正确方法

时间:2011-03-02 15:56:03

标签: javascript jquery asynchronous internationalization extjs

注意:如果您认为这篇文章应该有更好的标题,请告诉我/编辑它!

我正在尝试国际化我创建的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获取文件名的逻辑

感谢您的时间,

elshae

修改

现在我有一个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

3 个答案:

答案 0 :(得分:1)

您无法从回调处理程序返回值。好吧,如果你愿意,你可以,但它没有任何好处。

相反,最简单的方法就是重新排列代码,以便在<。em>之后 <。em>(.getScript()“完成后需要做的所有事情就是内部< / strong>回调函数。

所以,比如:

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

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

}//end getLabels()

我根本不知道Ext.js,所以我不确定“onReady”调用是否正确。关键是在“.getScript()”回调中,您可以可靠地使用您提取的脚本中的代码。

答案 1 :(得分:1)

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

答案 2 :(得分:1)

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