Jak mogę uniknąć "migającego" postępu div na szybkim wyniku z jQuery ajax?

Question

Używam jQuery dla moich wywołań AJAX do zaplecza ASP.NET przy użyciu this approach. Używam .ajaxStart i .ajaxStop, aby pokazać i ukryć wskaźnik postępu. Gdy żądanie AJAX kończy się bardzo szybko, wskaźnik postępu "miga", ponieważ nie jest wyświetlany wystarczająco długo.

Jednym z możliwych rozwiązań byłoby wyświetlanie tylko po minimalnym czasie (np. UpdateProgress.DisplayAfter w MS AJAX). Innym byłoby upewnienie się, że wskaźnik wyświetla się przez minimalny czas. Niestety, jQuery Pause plug-in nie działa, a sztuczki opóźniające działanie takie jak this również nie działają. Pewne rozwiązanie oparte na JavaScript setTimeout podobne do this SO answer wydaje się najprawdopodobniej, ale problem polega na tym, że wywołanie Ajax dalej przetwarza. W ten sposób wynik zostanie wyświetlony, gdy wskaźnik postępu będzie nadal widoczny.

Czy można to zrobić? A jeśli tak, to w jaki sposób?

Answer 1

Cóż, na wczesnych etapach projektu, który używa Ajax ze wskaźnikami postępu, oczywiście będziesz mieć efekt mrugania, ponieważ (mam nadzieję) nie pracujesz z ogromną ilością danych podczas testowania. Przekonasz się, że w miarę jak twój projekt otrzymuje coraz więcej danych, wskaźnik postępu pozostanie dłuższy i dłuższy. Nie polecam celowego tworzenia opóźnienia w utrzymywaniu wskaźnika postępu, ponieważ pogorszy to wrażenia użytkownika. Spróbuj odtwarzać z funkcją javascript setTimeout().

Answer 2

Spróbuj wykonać następujące czynności:

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

Chodzi o to, że znikną w turbinki z opóźnieniem (w tym przypadku 1000) i anulować animację i ukryć na ajaxComplete.

Jeśli chcesz zrobić opóźniony pokaz, możesz eksperymentować z używaniem funkcji animate() zamiast zanikać() i łączenia połączeń (np. $ (This) .animate (/ * coś tutaj * /). Show())

Mam nadzieję, że to pomoże!