Как я могу убедиться, что мой JS-скрипт будет выполнен первым среди других скриптов?

У меня есть скрипт, который сокращает мое меню и добавляет выпадающий список с “+”, если в меню слишком много элементов, чтобы украсить длинные меню, например:

Без запущенного скрипта:

Который я вызываю в functions.php с помощью:

function _s_scripts() {
    wp_enqueue_script( 'main', get_template_directory_uri() . '/js/main_res.js', array( 'jquery' ), '', false );
}
add_action( 'wp_enqueue_scripts', '_s_scripts' );

К сожалению, это приводит к позднему выполнению и дерганности. Есть ли способ подключить этот скрипт к “как только закончено создание X части (меню)”, чтобы это сделать?

Эффект очень заметен для пользователя:

https://i.sstatic.net/9270D.jpg

и вот скрипт, только для тестирования, main_res.js:

function sliceMenu(desired_len) {
    var menu_len = document.querySelectorAll('#primary-menu > li').length;

    if (menu_len > desired_len) {

        var append_menu_el = document.createElement('div');
        append_menu_el.innerHTML = ('<div id="js-cover-menu"><img class="plus" src="https://wordpress.stackexchange.com/questions/293747/$PATH/svg/plus_menu.svg" alt="more-menu"></div>').replace('$PATH', ABSPATH);
        document.getElementById('primary-menu').parentNode.appendChild(append_menu_el);

        let diff = menu_len - desired_len;
        let sliced_lis = [...(document.querySelectorAll('#primary-menu > li'))].slice(-diff);


        var js_menu_el = document.createElement('ul');
        js_menu_el.setAttribute('id', 'js-cover-menu-dropdown');
        document.getElementById('js-cover-menu').appendChild(js_menu_el);

        js_cover_menu_el = document.getElementById('js-cover-menu-dropdown');

        for(var i = 0, length = sliced_lis.length; i < length; i++) {
            js_cover_menu_el.appendChild(sliced_lis[i]);
        }
        document.querySelectorAll('#js-cover-menu-dropdown > li > ul').forEach(node => node.remove());
    } else {
        return;
    }
}

Во-первых, если вы не используете jQuery, то не передавайте jQuery как зависимость функции wp_enqueue_script().

Теперь по вашему вопросу. Это не совсем связано с WordPress, но тем не менее. Вы не упомянули, как вызываете эту функцию, так как это единственное, что здесь имеет значение. Если вы выводите свой код позднее, например, в подвале, он не будет выполняться, пока не загрузится все, что перед этой частью. Моя рекомендация – использовать дочернюю тему и добавить код сразу после вывода вашего меню и вызвать функцию. Таким образом, скрипт выполнится сразу после того, как меню будет создано, и поскольку jQuery не требуется, вы не столкнетесь с проблемами его использования.

Похоже, ваш скрипт частично использует ванильный JavaScript. Если вы сможете избавиться от его зависимости от jQuery, вы можете просто вставить его прямо в тег скрипта в вашем футере.

Однако скрипты, которые выполняются на $( document ).ready(), всегда будут иметь такой эффект, если вы изменяете html страницы.

Ваши две решения: правильно написать скрипт на PHP, установив скрытые элементы с помощью CSS-классов, чтобы они не отображались при загрузке страницы, и использовать логику JavaScript для добавления обработчиков нажатий на “+”.

Еще один немного более хитрый вариант – скрыть div с помощью CSS, а в конце вашего JavaScript применить CSS-класс, который его показывает. Теперь страница будет загружаться без ничего, а через мгновение меню станет видимым. Это немного лучше, чем загрузка меню, выглядещего одним образом, и затем полностью изменяющегося после загрузки страницы.