javascript - var in method call not redefined

Question

I've written a code which works perfectly but when I switch hardcoded parameters to a variable I get stuck with a problem which I understand but I don't have an idea how to resolve. Also, I am not aware if there is any kind of pattern which could resolve this.

var IsIframeAdded = (function(){

    var nr_of_elem = 0;
    var elem;

    events.subscribe( elem + "Loaded", function(length){
        disableIframes(elem);
        nr_of_elem = length;
    });
    //events.subscribe() must be placed above checkIfElemAdded()


    var checkIfElemAdded = function() {
        elem = functional.scripts[0].class;  //Change-set the value of elem variable

        if ( is_page() || is_page('shop') || is_page('portfolio') || is_page('fl-studio-song-starter') ) {
            domCallback.isElemAdded( elem, nr_of_elem ); //check if iframe is added to the DOM
        }
    };


    events.subscribe( "JSONloaded", checkIfElemAdded );
    events.subscribe( "loadMoreClicked", checkIfElemAdded );

})(); // !isIframeAdded


$('.music-portfolio-query').on('click', '.showmore-btn', function(){
    events.publish( "loadMoreClicked" );
});
    enter code here

As I have marked with a comment in code I must keep events.subscribe() above function called checkIfElemAdded. That way I avoid using setTimeout() on response from domCallBack.isElemAdded()

I have mentioned that I understand the problem so I will try to describe it:

Events.subscribe() doesn't listen to the correct event name.

Problem is with elem variable in events.subscribe() method call That variable is set on script load which is too early for variable to be set with an element that is pulled from JSON file. Variable elem in that call should be loaded after JSONloaded event. ( I am trying to avoid setTimeout solutions )

Are there any developers experienced enough to help me out with this?

Thanks

This looks like it's probably a duplicate of "how do I return from an async call". I'm not sure though. — Carcigenicate, Nov 24 '18 at 17:06
https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Carcigenicate, Nov 24 '18 at 17:07
I'm not sure precisely what you're asking, but I'm guessing `events.subscribe` is async, so it's callback isn't run immediately. If you're trying to read `elem` before the `checkIfElemAdded` callback is run, it won't have been given a value yet. — Carcigenicate, Nov 24 '18 at 17:19
Procedure is like this: 1. When AJAX is done, it publishes JSONloaded to Observer. 2. Subscriber picks that and invokes a function named checkIfElemAdded. 3. Var elem gets changed. 4. Methode domCallback.isElemAdded() gets invoked 5. Methode domCallback.isElemAdded() publishes elem+"Loaded" name to Observer. 6. Events.subscribe should listen/pick that elem + "Loaded". But it seems that it is listening to undefined+"Loaded" instead of elem + "Loaded". Am I right? — Botić Denis, Nov 24 '18 at 17:31
I think that, maybe, hm, good question would be: Is there a way to postpone defining events.subscribe() method? — Botić Denis, Nov 24 '18 at 17:37

score 0 · Accepted Answer · answered Nov 24 '18 at 18:21

I have found a solution myself so if anyone would need it, here it is.

var IsIframeAdded = (function(){

    var nr_of_elem = 0;
    var elem;

    var checkIfElemAdded = function() {
        elem = functional.scripts[0].class;  //Change-set the value of elem variable


        events.subscribe( elem + "Loaded", function(length){
            disableIframes(elem);
            nr_of_elem = length;
        });
        //events.subscribe() must be placed above domCallback.isElemAdded()


        if ( is_page() || is_page('shop') || is_page('portfolio') || is_page('fl-studio-song-starter') ) {
            domCallback.isElemAdded( elem, nr_of_elem ); //check if iframe is added to the DOM
        }
    };


    events.subscribe( "JSONloaded", checkIfElemAdded );
    events.subscribe( "loadMoreClicked", checkIfElemAdded );

})(); // !isIframeAdded


$('.music-portfolio-query').on('click', '.showmore-btn', function(){
    events.publish( "loadMoreClicked" );
});

javascript - var in method call not redefined

1 Answers1