Как добавить прелоадер в долго работающую функцию

Question

Я разрабатываю пользовательскую страницу html с информацией об установленных сертификатах на локальном компьютере. Информация о сертификате, которую я получаю через криптографический провайдер api, затем фильтрую возвращенные сертификаты с некоторыми ограничениями (Issuer, CommonName, et c). Это работа моей функции loadCertificates. Я показываю результаты по нажатию кнопки. Но loadCertificates занимает несколько секунд, и я хочу показать preloader перед loadCertificates и скрыть после:

        $("#select__cert-btn").click(function () {
            showPreloader();
            var certificates = loadCertificates(restrictions);
            hidePreloader();
            showCerificates(certificates);
        });

Функции showPreloader и hidePreloader только добавляют / удаляют div с gif-фоном для контейнера с информация о сертификатах. Но когда я нажимаю на кнопку, моя страница кажется замороженной и только через несколько секунд показывает результаты (без появления моего предварительного загрузчика). Но в режиме отладки перед запуском loadCertificates предзагрузчик добавляется в html, но он не виден.

Раньше у меня никогда не возникало таких же проблем, но кажется, что loadCertificates блокирует основной поток, но если я прав, почему showPreloader не работает корректность?

Как решить мою проблему?

Answer 1

Я бы попытался использовать обещание, чтобы loadCertificates выполнял асинхронно c без блокировки основного потока.

Попробуйте это:

$("#select__cert-btn").click(function () {
    showPreloader();
    var certificates = new Promise(function(resolve, reject) {
       loadCertificates(restrictions);
       resolve();
    });
    certificates.then(function(result) {
        hidePreloader();
        showCerificates(certificates);
    });
});

Answer 2

если ваша функция loadCertificates вызывает конечную точку через ajax, тогда вы можете просто добавить html регион, который будет скрыт / показан с изображением gif (загрузка):

<!-- Will be called on every ajax call to show the spinner -->
    <div class="row" id="ajaxLoading" style="display:none">
        <div class="col-md-4 offset-4">
            <img src="~/Images/loading.gif" />
        </div>

    </div>

, затем добавьте в ваш файл scipt:

var ajaxLoading = $('#ajaxLoading');
//add a spinner to every ajax call
    $(document).ajaxStart(function () {
        ajaxLoading.show();
    });
    $(document).ajaxStop(function () {
        ajaxLoading.hide();
    });