Edit Question - KnowledgeHub

Title Body

This seems silly, but I can't find how to do an asynchronous function call with jQuery that doesn't involve some server-side request. I have a slow function that iterates through a lot of DOM elements, and I want the browser to not freeze up while this function is running. I want to display a little indicator before the slow function is called, then when the slow function returns, I want to hide the indicator. I have the following: $('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; }); Currently I submit the form and the indicator isn't displayed, the browser freezes, and then slowFunctionCall is finished. Edit: I used Vivin's answer , specifically the Sitepoint link to get the following solution: 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

Tags (comma-separated) Cancel