Как я могу избежать "мерцания" div прогресса на быстрый результат с jQuery ajax?

Question

Я использую jQuery для своих AJAX-вызовов к бэкэнду ASP.NET, используя этот подход . Я использую .ajaxStart и .ajaxStop, чтобы показать и скрыть индикатор прогресса. Когда AJAX-запрос завершается очень быстро, индикатор выполнения «мигает», поскольку он отображается недостаточно долго.

Одним из возможных решений было бы отображение только через минимальное время (как UpdateProgress.DisplayAfter в MS AJAX). Другой - убедиться, что индикатор отображается в течение минимального времени. К сожалению, плагин jQuery Pause , похоже, не работает, и такие трюки с задержкой, как this , также не работают. Некоторое решение на основе JavaScript setTimeout, похожее на , этот ответ SO кажется наиболее вероятным, но проблема в том, что вызов Ajax продолжает обрабатывать. Таким образом, результат отображается, пока индикатор прогресса еще виден.

Итак, это можно сделать? И если да, то как?

Answer 1

Попробуйте следующее:

$("#spinner")
    .bind("ajaxSend", function() {
            $(this).fadeIn(1000);
    })
    .bind("ajaxComplete", function(){
        $(this).stop();
        $(this).hide();
    });

Идея состоит в том, что вы затухаете в счетчике с временной задержкой (в данном случае 1000), отменяете анимацию и прячетесь на ajaxComplete.

Если вы хотите сделать отложенное шоу, вы можете поэкспериментировать с использованием animate () вместо fade () и цепочкой вызовов (например, $ (this) .animate (/ * что-то здесь * /). Show ())

Надеюсь, это поможет!

Answer 2

Что ж, на ранних этапах проекта, в котором используется Ajax с индикаторами прогресса, вы, конечно, будете мигать, потому что вы (надеюсь) не работаете с огромным количеством данных во время тестирования. Вы увидите, что по мере того, как ваш проект получает все больше и больше данных, индикатор прогресса будет оставаться все дольше и дольше. Я не рекомендую намеренно создавать задержку, чтобы держать индикатор прогресса там, потому что это отвлекает от пользовательского опыта. Попробуйте поиграть с функцией javascript setTimeout ().