Правильные способы обработки асинхронных функций

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

Затем в моей форме. 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.Странная вещь в том, что когда я не пытался получить язык из переменной get url и вместо этого запустил свою функцию getLabels, передавая имя файла непосредственно $ .getScript внутри него, я получил желаемые результаты и отобразили метки моей формысоответственно.Я очень признателен за любую помощь с этим.Я все еще новичок в асинхронных вызовах, и они всегда меня застревают: - /.Я подумал, что наличие $ .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 etc

Answer 1

Возможно, вместо того, чтобы поместить свой языковой код в функцию javascript, почему бы не поместить его в файл в формате JSON, который позволит вам использовать функции jQuery для загрузки JSON в нужный объект, и ваш код может использовать его вместо .

Answer 2

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

Answer 3

Вы не можете вернуть значение из обработчика обратного вызова, подобного этому.Ну, вы можете, если хотите, но это не приносит никакой пользы.

Вместо этого, самое простое, что нужно сделать, это просто переставить код так, чтобы все, что вам нужно было сделать после то, что ".getScript ()" завершает - это код прямо здесь внутри функции обратного вызова.

Итак, что-то вроде:

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

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

}//end getLabels()

Я не знаюExt.js вообще, поэтому я не уверен, что этот вызов onReady будет правильным решением.Дело в том, что внутри вашего обратного вызова .getScript () вы можете надежно использовать код в выбранном вами скрипте.