Как передать в queue актуальное значение переменной?

Question

[pvgdrk]

Есть функция которая получает какие-то данные с сервера. Сервер может ответить почти мгновенно, а может и потупить немного. В случае задержки, что бы пользователь понимал что происходит(ничего не зависло, идет загрузка), появляется гифка загрузки. В то же время, когда ответ приходит быстро, гифка раздражающе появляется на долю секунды и тут же исчезает. По-этому было решено сделать появление гифки отложенным на 1 секунду. Этого времени в большинстве случаев хватает на ответ с сервера:

function showLoadingGif(stat) {
    $('#loadingGif').delay(1000).queue(function(next){
        if (stat === 0){
            $(this).removeClass('hidden');
            next();
        }
    });
}

Перед ajax запросом исполняется эта функция и через секунду проверяет не пришел ли ответ. Если пришел (stat == 1), то гифка загрузки не будет показана.
Но вот незадача, функция принимает не текущее значение stat, а то которое было при исполнении функции. Как передать в queue актуальное значение переменной?

Answer 1

[Rsa97]

Сделайте по другому - при запросе запускайте таймер на 1 секунду, при срабатывании таймера показывайте индикатор загрузки, при получении ответа от сервера останавливайте таймер и скрывайте индикатор.

var iv = setInterval(function() {
        $('#loadingGif').show();
    }, 1000);
$.ajax(...)
.always(function() {
    clearInterval(iv);
    $('#loadingGif').hide();
});

Правда, если загрузка будет чуть дольше секунды, всё равно индикатор будет мелькать.

Comments

[pvgdrk]

не знал про clearInterval. спасибо. все отлично работает и кода в два раза меньше

Answer 2

[neolink]

вам либо надо сделать переменную stat в тойже области видимости, либо передавать в stat объект, в принципе вы можете передать объект самого ajax запроса, а потом посмотреть выполнился он или нет:
api.jquery.com/deferred.state

var req = $.ajax( "example.php" )
showLoadingGif(req); 

function showLoadingGif(req) {
    setTimeout(function () {
        if (req.state() == 'pending') {
            var loader = $('#loadingGif');
            loader.removeClass('hidden');
            req.always(function () {
                loader.addClass('hidden');
            })
        }
    }, 1000);
}

демо: jsfiddle.net/9txLg20s/3

Comments

[pvgdrk]

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

[neolink]

pvgdrk: а с promis'ами что не получилось?