javascript, synchronous και asynchronous

[Chemical]

Φτιαχνω μια εφαρμογη, και θελω να της προσθεσω i18n λειτουργια, υπαρχουν καπου στο dom κουμπια στα οποια εχω βαλει event handlers με onclick να κανουν store ενα cookie με το προθεμα της γλωσσας ('el, 'en'). Κανω ελενχο την τιμη αυτη και με ενα switch φτιαχνω objects με το αντιστοιχο content.

// Filename collections/menu.js

define([
    'underscore',
    'backbone',
    'models/menuItem'

], function(_, Backbone, MenuItemModel) {
    var MenuCollection = Backbone.Collection.extend({
        model: MenuItemModel,
        initialize: function(options) {

            langCOOKIE = getCookie('lang');
            
            switch (langCOOKIE) {
                case 'el' :
                    var menuItemHow = new MenuItemModel({ id: '0', name: 'nav-how', color: 'bordo', url: '#/how', title: 'Πως' });
                    var menuItemProducts = new MenuItemModel({ id: '1', name: 'nav-products', color: 'green', url: '#/products', title: 'Προϊόντα' });
                    var menuItemPartners = new MenuItemModel({ id: '2', name: 'nav-partners', color: 'orange', url: '#/partners', title: 'Συνεργάτες' });
                    var menuItemLinks = new MenuItemModel({ id: '3', name: 'nav-links', color: 'blue', url: '#/links', title: 'Σύνδεσμοι' });
                    var menuItemInterviews = new MenuItemModel({ id: '4', name: 'nav-interviews', color: 'bordo', url: '#/interviews', title: 'Συνεντεύξεις' });

                    break;
                
                case "en" :
                    var menuItemHow = new MenuItemModel({ id: '0', name: 'nav-how', color: 'bordo', url: '#/how', title: 'How' });
                    var menuItemProducts = new MenuItemModel({ id: '1', name: 'nav-products', color: 'green', url: '#/products', title: 'Products' });
                    var menuItemPartners = new MenuItemModel({ id: '2', name: 'nav-partners', color: 'orange', url: '#/partners', title: 'Partners' });
                    var menuItemLinks = new MenuItemModel({ id: '3', name: 'nav-links', color: 'blue', url: '#/links', title: 'Links' });
                    var menuItemInterviews = new MenuItemModel({ id: '4', name: 'nav-interviews', color: 'bordo', url: '#/interviews', title: 'Interviews' });                        

                    break;

                default:
                    var menuItemHow = new MenuItemModel({ id: '0', name: 'nav-how', color: 'bordo', url: '#/how', title: 'How' });
                    var menuItemProducts = new MenuItemModel({ id: '1', name: 'nav-products', color: 'green', url: '#/products', title: 'Products' });
                    var menuItemPartners = new MenuItemModel({ id: '2', name: 'nav-partners', color: 'orange', url: '#/partners', title: 'Partners' });
                    var menuItemLinks = new MenuItemModel({ id: '3', name: 'nav-links', color: 'blue', url: '#/links', title: 'Links' });
                    var menuItemInterviews = new MenuItemModel({ id: '4', name: 'nav-interviews', color: 'bordo', url: '#/interviews', title: 'Interviews' });

            }

            this.add([menuItemHow, menuItemProducts, menuItemPartners, menuItemLinks, menuItemInterviews]);
        }


            });
        }
    });

    return MenuCollection;
});

Θελω ομως να φτιαξω κάτι πιο ευέλικτο, όπως να χρησιμοποιώ json  και αναλογα το cookie να φορτωνω το αντιστοιχο json με το content της επιλεγμενης γλωσσας. φορτωνω asynchronoys τα json και μολις ολοκληρωθει τα περναω  σε ενα object 'i18n' που εχει δημιουργηθει νωριτερα της function για scope λογους. Το προβλημα μου ειναι οτι οταν γινεται η καταχώρηση στο callback του ajax request δειχνει να μην εχει πάρει τα data που επιστρεφει η ajax call (στο χρονο που θέλω τουλαχιστον) 'H  δεν καταλαβαινω  το scope στη javascript.

// Filename collections/menu.js

define([
    'underscore',
    'backbone',
    'models/menuItem'

], function(_, Backbone, MenuItemModel) {
    var MenuCollection = Backbone.Collection.extend({
        model: MenuItemModel,
        initialize: function(options) {

            langCOOKIE = getCookie('lang');
            var i18n = new Object();
            if(langCOOKIE) {
                alert(langCOOKIE.length);
                $.getJSON('js/locales/'+langCOOKIE+'.json', function(data) {

                })
                .done(function(data){
                    if(data){
                        
                        i18n.menu = data;
                        console.log(JSON.stringify(i18n.menu));
                    }
                });

                console.log('i18nMenu='+JSON.stringify(i18n.menu));
                # επιστρέφει 'i18nMenu=undefined'

            } else {        

                var menuItemHow = new MenuItemModel({ id: '0', name: 'nav-how', color: 'bordo', url: '#/how', title: 'How' });
                var menuItemProducts = new MenuItemModel({ id: '1', name: 'nav-products', color: 'green', url: '#/products', title: 'Products' });
                var menuItemPartners = new MenuItemModel({ id: '2', name: 'nav-partners', color: 'orange', url: '#/partners', title: 'Partners' });
                var menuItemLinks = new MenuItemModel({ id: '3', name: 'nav-links', color: 'blue', url: '#/links', title: 'Links' });
                var menuItemInterviews = new MenuItemModel({ id: '4', name: 'nav-interviews', color: 'bordo', url: '#/interviews', title: 'Interviews' });

                this.add([menuItemHow, menuItemProducts, menuItemPartners, menuItemLinks, menuItemInterviews]);            //console.log(this.models.menuItemHow);
            }
        }
    });

    return MenuCollection;
});

Ευχαριστώ.

 

[παπι]

Αυτο το λαθος το βλεπω πολυ συχνα.

Θα σου απαντησω με ερωτηση. Γιατι εχεις callback (δηλαδη async) ; Γιατι λες "σε αυτο το σημειο του κωδικα θα βαλω μια callback";

[Chemical]

Αυτο το λαθος το βλεπω πολυ συχνα.

Θα σου απαντησω με ερωτηση. Γιατι εχεις callback (δηλαδη async) ; Γιατι λες "σε αυτο το σημειο του κωδικα θα βαλω μια callback";

το σκεφτομαι λεγοντας "οταν ολοκληρωθει η λειτουργια της  getJSON, καταχώρησε αυτο που επιστρεφει".

[παπι]

Και το κανει μεσα στο .done σωστα; αλλα δεν το κανει απεξω, γιατι; γιατι ηρθε το οταν.

[defacer]

το σκεφτομαι λεγοντας "οταν ολοκληρωθει η λειτουργια της  getJSON, καταχώρησε αυτο που επιστρεφει".

 

Ωραία. Οπότε γιατί είναι περίεργο ότι πριν ολοκληρωθεί η λειτουργία της getJSON πας να διαβάσεις τι έχει καταχωρηθεί και βρίσκεις το τίποτα;

 

Πέρα από οτιδήποτε άλλο, εφόσον

• θέλεις η σελίδα σου να εμφανίζει τα σωστά κείμενα ξεκινώντας από τη χρονική στιγμή t = 0
• η getJSON ξεκινάει τη στιγμή t = 0 αλλά έχει μια διάρκεια > 0

είναι προφανές ότι με αυτό το σύστημα όπως το έχεις τώρα δεν πρόκειται να πετύχεις το σκοπό σου ο,τι κι αν κάνεις.

 

Αντί γι' αυτό, διάβασε στον server το lang cookie, πάρε το lang.json και πέτα το μέσα στον κώδικά σου (i18n = ...) όπως είναι.

[Chemical]

Δεν υπάρχει σερβερ θα ειναι presentation app θα ζει σε ενα tablet και θα το βλεπει ο επισκεπτης που θα κρατά τo/τα tablet/tablets και δεν ειναι στανταρντ οτι θα υπάρχει κάποιο δικτυο εκει, νόμιζα οτι στην .done παιρνω το αποτελεσμα στον χρόνο που θέλω έτσι ωστε να το χρησιμοποιήσω μετα την geJSON (όπως φαινεται στο script).

[παπι]

Αν ειναι ετσι, ριξε μια ματια στο storage του htm5. Παιζει να σου'ρθει κουτι.

 

 

btw εφοσον δεν εχεις δικτυο, που κανεις ajax request;

 

yg δες και αυτο https://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings εκει που λεει async

[Chemical]

τελικά θα πρέπει να υπάρχει ενας σερβερ, lol, σορρυ ήμουν σε συγχυση. Δεν ξέρω θα δω τι θα κάνω με αυτο. θα κοιτάξω και το htm5 storage.

Ευχαριστω