jQuery chamada de função assíncrona, nenhuma solicitação AJAX
Isso parece bobagem, mas não consigo encontrar como fazer uma chamada de função assíncrona com o jQuery que não envolve alguma solicitação do servidor. Eu tenho uma função lenta que percorre muitos elementos DOM e quero que o navegador não congele enquanto essa função estiver em execução. Quero exibir um pequeno indicador antes que a função lenta seja chamada e, quando a função lenta retornar, quero ocultar o indicador. Eu tenho o seguinte:
$('form#filter', parentNode).submit(function() {
var form = $(this);
indicator.show();
var textField = $('input#query', form);
var query = jQuery.trim(textField.val());
var re = new RegExp(query, "i");
slowFunctionCall(); // want this to happen asynchronously; all client-side
indicator.hide();
return false;
});
Atualmente, envio o formulário e o indicador não é exibido, o navegador congela e, em seguida,slowFunctionCall
está terminado
Editar Eu usei Resposta de Vivin, especificamente o Link do site para obter a seguinte solução:
var indicator = $('#tagFilter_loading', parentNode);
indicator.hide();
var spans = $('div#filterResults span', parentNode);
var textField = $('input#query', parentNode);
var timer = undefined, processor = undefined;
var i=0, limit=spans.length, busy=false;
var filterTags = function() {
i = 0;
if (processor) {
clearInterval(processor);
}
indicator.show();
processor = setInterval(function() {
if (!busy) {
busy = true;
var query = jQuery.trim(textField.val()).toLowerCase();
var span = $(spans[i]);
if ('' == query) {
span.show();
} else {
var tagName = span.attr('rel').toLowerCase();
if (tagName.indexOf(query) == -1) {
span.hide();
}
}
if (++i >= limit) {
clearInterval(processor);
indicator.hide();
}
busy = false;
}
}, 1);
};
textField.keyup(function() {
if (timer) {
clearTimeout(timer);
}
/* Only start filtering after the user has finished typing */
timer = setTimeout(filterTags, 2000);
});
textField.blur(filterTags);
Isso mostra e oculta o indicador e também não congela o navegador. Você pode observar os elementos DOM sendo ocultos enquanto funcionam, e é isso que eu estava procurando.