Стили обновляются после AJAX
 

Всем привет.
Подскажите, пожалуйста,
Часть кода

class TestingTestStudying {

    constructor() {
        this.eventListeners();
        this.initData();
        this.refreshUI();
    }

    eventListeners() {
        jQuery(document).on('click', '[data-testing-start-testing]', this.startTesting.bind(this));
        jQuery(document).on('click', '[data-testing-question-action]', this.questionAction.bind(this));
    }

    initData() {
        window.userAnswersTrue = {};
        window.userAnswersFalse = {};
        let testingQuestionData = jQuery('#testingQuestionData');
        window.testingBlock = jQuery('[data-testing-block]');
        window.ajaxUrl = jQuery(testingQuestionData).data('testing-collection');
        window.currentQuestionNumber = parseInt(jQuery(testingQuestionData).data('current-question-number'));
        window.collectionId = parseInt(jQuery(testingQuestionData).data('testing-collection-id'));
        window.topicId = parseInt(jQuery(testingQuestionData).data('testing-topic-id'));
        window.questionsCount = parseInt(jQuery(testingQuestionData).data('testing-questions_count'));

        window.ui = {};
        window.ui.top = jQuery('[data-testing_ui-top]');
        window.ui.bottom = jQuery('[data-testing_ui-bottom]');
        window.ui.buttonPreview = jQuery('[data-testing-question-action="preview"]');
        window.ui.buttonNext = jQuery('[data-testing-question-action="next"]');
        window.ui.questionNumber = jQuery('[data-testing_ui-question_number]');
        window.ui.questionCount = jQuery('[data-testing_ui-question_count]');
        window.ui.gotAnswers = jQuery('[data-testing_ui-got_answers]');
        window.ui.trueAnswers = jQuery('[data-testing_ui-true_answers]');
        window.ui.falseAnswers = jQuery('[data-testing_ui-false_answers]');
        window.ui.overlay = jQuery('[data-testing_ui-overlay]');

        this.questionTrueList = jQuery('#testingQuestionDataTrueList').html();
        this.questionFalseList = jQuery('#testingQuestionDataFalseList').html();
    }

    startTesting(e) {
        this.loadQuestionByNumber(1);
    }


    loadQuestionByNumber(questionNumber) {
        let that = this;
        jQuery.ajax({
            method: "GET",
            url: ajaxUrl,
            dataType: "JSON",
            async: false,
            data: {collectionId: window.collectionId, topicId: window.topicId, questionNumber: questionNumber},
            beforeSend: function () {
                window.ui.overlay
                    .fadeIn(300)
                    .stop();
            },
            complete: function () {
                window.ui.overlay
                    .stop()
                    .fadeOut(30);
            },
            success: function (response) {
                that.renderQuestion(response);
                window.currentQuestionNumber = questionNumber;
                that.refreshUI();
            },
        });
    }

    renderQuestion(response) {

    }
}

document.addEventListener('DOMContentLoaded', (event) => {
    new TestingTestStudying();
});

Проблема в том, что действия в beforeSend и complete срабатывают мгновенно но ПОСЛЕ выполнения ajax запроса. Что я только не делал. менял цвет элементов в функции startTesting, но он всё равно применяется только после выполнения AJAX. Что мне нужно исправить?

async: false - полностью и бескомпромиссно вешает всю страницу. Ничего не будет работать, пока он не закончит.
Т.е. beforeSend отрабатывает, но до того как браузер начнёт рисовать результат страница зависает и отвисает только когда данные будут загружены.

Очевидное решение - не использовать синхронные запросы, тем более это поведение объявлено устаревшим и в любой момент его могут выкинуть из современных браузеров(как наберутся смелости поломать сайты подобным тебе ребятам:) ).