Mostrar, em seguida, ocultar gifs de indicador animado / giratório é uma boa maneira de mostrar a um usuário que sua ação funcionou e que algo está acontecendo enquanto aguardam a conclusão da ação - por exemplo, se a ação exigir o carregamento de alguns dados de um servidor ) via AJAX.

Meu problema é, se a causa da desaceleração é umprocessadorfunção intensiva, o gif congela.

Na maioria dos navegadores, oO GIF pára de animar enquanto a função com fome de processador executa. Para um usuário, parece que algo falhou ou teve algum problema, quando na verdade está funcionando.

Exemplo JSBIN

Nota: o botão "This is slow" irá amarrar o processador por um tempo - cerca de 10 segundos para mim, irá variar dependendo das especificações do PC. Você pode alterar o quanto isso acontece com o atributo "data-reps" no HTML.

Expectativa: No clique, a animação é executada. Quando o processo é concluído, o texto é alterado (normalmente, também ocultamos o indicador, mas o exemplo fica mais claro se o deixarmos girando).Resultado atual: A animação começa a correr e depois congela até o processo terminar. Isso dá a impressão de que algo está quebrado (até que de repente se completa inesperadamente).

Existe alguma maneira de indicar que um processo está em execução que não congela se JS está mantendo o processador ocupado? Se não há como ter algo animado, vou recorrer à exibição, ocultando uma mensagem de texto estática dizendoLoading... ou algo semelhante, mas algo animado parece muito mais ativo.

Se alguém está se perguntandopor que estou usando um código que é intensivo em processador em vez de apenas evitar o problema, otimizando: é uma grande quantidade de renderização necessariamente complexa. O código é bastante eficiente, mas o que ele faz é complexo, então sempre exigirá do processador. Leva apenas alguns segundos, mas isso é o suficiente para frustrar um usuário, ehá muita pesquisa voltando há muito tempo para mostrar que os indicadores são bons para o UX.

Um segundo problema relacionado com spinners de gif para funções pesadas pelo processador é que o spinner não aparece até que todo o código em um conjunto síncrono tenha sido executado - o que significa que ele normalmente não mostrará o spinner até que seja hora de ocultar o spinner.

Exemplo JSBIN.Uma solução fácil que encontrei aqui (usada no outro exemplo acima) é embrulhar tudo depois de mostrar o indicador emsetTimeout( function(){ ... },50); com um intervalo muito curto, para torná-lo assíncrono. Isso funciona (veja o primeiro exemplo acima), mas não é muito limpo - tenho certeza de que há uma abordagem melhor.

Tenho certeza de que deve haver alguma abordagem padrão para os indicadores de carga intensiva do processador que eu desconheço - ou talvez seja normal usar apenasLoading... texto comsetTimeout? Minhas buscas não deram em nada. Li 6 ou 7 perguntas sobre problemas semelhantes, mas todas se revelam não relacionadas.

Editar Algumas ótimas sugestões nos comentários, aqui estão mais algumas especificidades do meu problema exato:

O processo complexo envolve o processamento de grandes arquivos de dados JSON (como em operações de manipulação de dados JS na memóriadepois de carregando os arquivos) e renderizando visualizações SVG (por meio do Raphael.js), incluindo um mapa do mundo complexo e detalhado, baseado nos resultados do processamento de dados do JSON. Então, algumas delas requerem manipulação DOM, outras não.Eu infelizmente preciso apoiar o IE8MAS se necessário eu posso dar aos usuários do IE8 / IE9 um retorno mínimo comoLoading... texto e dar a todos os outros algo moderno.