¿Cómo puedo evitar un divisor de progreso "intermitente" en un resultado rápido con jQuery ajax?

Question

Estoy usando jQuery para mis llamadas AJAX a un back-end de ASP.NET usando this approach. Estoy usando .ajaxStart y .ajaxStop para mostrar y ocultar un indicador de progreso. Cuando la solicitud AJAX finaliza muy rápidamente, el indicador de progreso "parpadea" porque no se muestra lo suficiente.

Una posible solución sería mostrar solo después de un tiempo mínimo (como UpdateProgress.DisplayAfter en MS AJAX). Otra sería asegurarse de que el indicador se muestre durante un tiempo mínimo. Desafortunadamente, el jQuery Pause plug-in no parece funcionar, y los trucos de retardo de efecto como this tampoco funcionan. Algún tipo de solución basada en JavaScript setTimeout similar a this SO answer parece más probable, pero el problema es que la llamada Ajax sigue procesándose. Por lo tanto, el resultado se muestra mientras el indicador de progreso aún está visible.

Entonces, ¿se puede hacer? Y si es así, ¿cómo?

Answer 1

Bueno, en las primeras etapas de un proyecto que utiliza Ajax con indicadores de progreso, por supuesto que tendrá un efecto de parpadeo, porque (con suerte) no está trabajando con una gran cantidad de datos a medida que está probando. Descubrirá que a medida que su proyecto obtiene más y más datos, el indicador de progreso se mantendrá por más tiempo. No recomiendo crear un retraso deliberadamente para mantener el indicador de progreso allí porque va en detrimento de la experiencia del usuario. Intenta jugar con la función javascript setTimeout().

Answer 2

intente lo siguiente:

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

La idea es que se desvanecen en la ruleta con un retardo de tiempo (en este caso 1000) y cancela la animación y ocultar en ajaxComplete.

Si desea hacer un show diferido, puede experimentar con el uso de animate() en lugar de fade() y encadenando las llamadas (por ej. $ (This) .animate (/ * something here * /). Show())

Espero que esto ayude!