[SOLVED] How to best handle async scripts


#1

I have to display a little save button from the Houzz.com service for each item in a gallery. The call to append the houzz js file is an async call. How do I properly do this without delaying my applicaion? This is the code in question:

        (function(d,s,id){
            if(!d.getElementById(id)){
                var js=d.createElement(s);
                js.id=id;
                js.async=true;
                js.src="//platform.houzz.com/js/widgets.js?"+(new Date().getTime());
                var ss=d.getElementsByTagName(s)[0];
                ss.parentNode.insertBefore(js,ss);
            }
        }
        )(document,"script","houzzwidget-js");

I’m unfamiliar with the Meteor.wrapAsync but is this the use-case for that? I’ve never really had issues with this but right now this is giving me a headache. Any pointers are much appreciated.


#2

Not sure if this is the “best” way but this is what worked. I have a file of helper functinos and snippets in a global scope that’s loaded from a folder: client/lib

var houzzScript = document.createElement('script');
houzzScript.type = "text/javascript";
houzzScript.async = true;
houzzScript.src = "//platform.houzz.com/js/widgets.js?"+(new Date().getTime());
houzzScript.onload = houzzButtonLoadedCallback;
houzzScript.onerror = houzzButtonErrorCallback;

loadHouzz = function(el, cb){
    //Load the script tag
    var head = document.getElementsByTagName('head')[0];
    return head.appendChild(houzzScript);
};

Because this is going for a grid of products, and each products needs a Houzz SAVE button I had to wait to load this script until all the images were set. Turns out I had a lot waiting for that so I kept track of how many products I was displaying and then mapped a load event to each product image. Everytime that event was fired it’d increment the count. Once I reached the total number of products displayed I could init all my layout scripts and this houzz script. So within that block that monitors load status I have this:

        // Try to load Houzz
        var houzzLaterSync = Meteor._wrapAsync(loadHouzz);
        var result = houzzLaterSync();
        if(result){
            //noting
        }

Probably don’t really need to have a useless if statement but it works, and I need to keep trucking onward! :smile:

Thanks to Eventedmind for this video that led me to this.