показать полосу загрузки пользователю

147

13 марта 2018, 01:49

в контроллере производится следующая задача:

Получаем данные json - первый запрос
Еще 1 json запрос
Производим некоторые операции с данными
Запихиваем все операции в таблицу

На все про все уходит от 1 до 5 секунд. Хотелось бы, чтобы пользователь видел прогресс. Можно ли как то показать пользователю, что именно делает программа в данную секунду? К примеру (Статус: Получаю данные | Обновляю таблицу). И если нет, то можно ли сделать какую-то заглушку на время загрузки? Типа кружок крутится вертится или еще чего. Но в идеале бы знать, что именно происходит.

Answer 1

Проще всего разделить прогресс бар на куски по 25% (100/4). Перед началом какой-то задачи мы говорим об этом пользователю и показываем процент.

function manage_preloader(data) {
    console.log(data.action, data.done + '%');
    // по идее data.done меняет width прогресс бара
    // с data.action понятно
}

function progress() {
    manage_preloader({
        action: 'Выполняю цикл',
        done: 25;
    });
    for () {...};

    manage_preloader({
        action: 'Цикл завершен, отправляю запрос к серверу.',
        done: 50;
    });
    $.ajax(...);

    manage_preloader({
        action: 'Сервер прислал данные, работаю с DOM.',
        done: 75;
    });
    $('div').css(...);

    manage_preloader({
        action: 'Работа с DOM заершена успешно.',
        done: 100;
    });
}

В целом логика, я думаю, ясна. Рад, если чем-то помог.

Answer 2

как вариант сделать через setinterval

а при получении данных использовать redis - туда прогресс пихать - и на setinterval получать процент

Это самый простой способ - если более сложней - то можно через веб сокеты - когда серверная часть посылает данные в клиент через открытый веб сокет