Показывать загрузчик в ожидании обещания с cujojs?

Question

Я работаю над веб-приложением, в котором я делаю асинхронное использование cujojs с их расширением whenjs. Тем не менее, я обычно просто подключаюсь к одному из наших сервисных интерфейсов и позволяю им выполнять всю тяжелую работу.

Есть ли способ автоматически показать спиннер / загрузчик, когда приложение ожидает ответа от сервера? Просто небольшая визуальная подсказка, возможно, в углу, позволяющая пользователю понять, что все движется вперед.

Главное, чего я хочу избежать - это вручную показывать / скрывать загрузочный счетчик каждый раз, когда я звоню.

Answer 1

Есть два способа сделать это:

1) Используйте глобальные обработчики событий ajax для прослушивания асинхронной активности. Вы можете привязать их к вашему документу и, следовательно, выполнить некоторые js, независимо от того, какой вызов ajax выполняется:

$(document).on('ajaxStart', function() {
    // show your spinner
});
$(document).on('ajaxComplete', function() {
    // hide your spinner
});

2) Pace.js - это "автоматическая строка прогресса веб-страницы", которую вы можете легко включить и выбрать тему из:

<script src="/pace/pace.js"></script>
<link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />

Особенно легко получить тему на их github. Анимация, которую вы выберете, будет отображаться каждый раз, когда загружается ваша страница или ожидается другой ответ.