Enqueue Javascript After ALL Other Scripts (Including Async Scripts)

Question

I have a script I'd like to include with Wordpress. This script relies on another (prettyPhoto) to run, as well as on JQuery being loaded. I'd like my script to be the very last script to be included on the page.

After reading about using wp_enqueue_scipt in this answer: https://stackoverflow.com/a/19914138/1745715

And after fostertime was nice enough to walk me through a little debugging down in the comments below, I've found that I can't enqueue my script, as the last script to load (themify.gallery.js, I was mistaken in the comments below when I thought it was carousel.js) is done so asyncronously in a function inside a Themify javascript file called main.js (themes/themify-ultra/themify/js/main.js)

Here's where it's loaded:

    InitGallery: function ($el, $args) {
        var lightboxConditions = ((themifyScript.lightbox.lightboxContentImages && $(themifyScript.lightbox.contentImagesAreas).length && themifyScript.lightbox.lightboxGalleryOn) || themifyScript.lightbox.lightboxGalleryOn) ? true : false;
        if ($('.module.module-gallery').length > 0 || $('.module.module-image').length > 0 || $('.lightbox').length || lightboxConditions) {
            if ($('.module.module-gallery').length > 0)
                this.showcaseGallery();
            this.LoadAsync(themify_vars.url + '/js/themify.gallery.js', function () {
                Themify.GalleryCallBack($el, $args);
            }, null, null, function () {
                return ('undefined' !== typeof ThemifyGallery);
            });
        }
    },

It would stand to reason that I could simply add my javascript include right here within this function after the line that loads themify.gallery.js. However, I want to ensure that I can upgrade my themify theme without causing the change to be lost. To solve this problem I'm using a child theme. As this main.js is located within the themes folder, is it possible to overwrite it the same way I would a normal template file, and make my change? Even if it is, is it really safe to overwrite the entire main.js file when I'm concerned about my ability to upgrade Themify later down the road? Or Is there a less destructive way to inject my include code into this function from elsewhere? Open to suggestions on the best solution.

Answer 1

After doing some reading, I found that it is not possible to overwrite one function in a JS file in that way. The solution was to overwrite the entire main.js file in order to make the change. I then enqueued my new main.js script with the exact same name that it was registered to in the original:

// Enqueue main js that will load others needed js
wp_register_script('themify-main-script', '/wp-includes/js/main.js', array('jquery'), THEMIFY_VERSION, true);
wp_enqueue_script('themify-main-script');

Answer 2

I would have simply commented on your post first, but I don't have enough reputation... :/

Are all the other scripts loaded via wp_enqueue_script?

If you var_dump( $GLOBALS['wp_scripts']->registered ); you can see all registered/enqueued scripts (via wp_enqueue_script : how to change loading order of scripts?)

You should be able to change the dependency ( array('jquery') ) handle in your wp_register_script to array('handle-of-last-enqueued-script') this will make sure your script isn't loaded until that one is.