Статьи

Ajax загрузка, минимальное время работы

Ajax загрузка, минимальное время работы

Иногда ajax запросы получаются очень быстрыми, но не исключена вероятность что запрос может задержаться по разным причинам. Ajax loader как раз и нужен для того чтобы показать пользователю что что-то происходит, идет работа и нужно подождать.

Но что делать если запросы быстрые, пользователь не знает что это такое, что это фоновый ajax запрос, это ему вообще не интересно, в итоге он увидит быстрое отображение и скрытие загрузчика и может вообще нечего не понять, и воспринять как ошибку сайта или что-то подобное.

Задача, сделать ajax loader с минимальным времени работы, допустить 1,5 секунды.


var loaderTimeStart = 0;
var loaderTimer = 1500;

showLoader = function ()
{
    loaderTimeStart = new Date().getTime();
    // тут код чтобы отобразить загрузчик
};

hideLoader = function ()
{
    
    loaderTimeEnd = new Date().getTime();

    var time = this.loaderTimeEnd - this.loaderTimeStart;
    if (time < this.loaderTimer) {
        var t = this.loaderTimer - time;
        setTimeout(function (){
            // тут код чтобы скрыть загрузчик

            // console.log("Старт: " + loaderTimeStart);
            // console.log("Конец: " + loaderTimeEnd);
            // console.log("Разница: " + time);
            // console.log("Через: " + t);
            // var result = new Date().getTime() - loaderTimeStart;
            // console.log("Всего: " + result);
        }, t);

        return;
    }

    // тут код чтобы скрыть загрузчик
};


$.post("/url/", {}, function (data) {
       hideLoader();
    },
    'json'
);

Основная логика в функции hideLoader(), наша задача определить разницу между временем возврата запроса и нашим минимальным, если время запроса меньше находим разницу и используем setTimeout() с указанием этой разницы.

В итоге у нас получится минимальное время запроса или реальное если запрос выполнился дольше.

Возврат к списку