jQuery asynchronous function call, no AJAX request
asynchronous, forms, function, javascript, jquery
Solution
Javascript runs in a single thread and therefore if you have a slow function it will block everything else.
UPDATE
That will do some of what you want, but keep in mind that they are not widely supported supported in IE (I think they will be in IE10).
Some resources on Web Workers:
- Using Web workers
- Wikipedia article on Web Workers
- WHATWG: Web Workers
Here are a few resources on accomplishing multi-threading without web workers. It's important to note that this isn't "true" multi-threading:
- Multi-threading in Javascript (title is a little misleading; it's not true multi-threading)
- Why doesn't Javascript support multi-threading?
- Is there some way to do multi-threading in Javascript?
- Simulating multi-threading using IFRAMEs (I'm not sure how viable this method is; it might be more trouble than it's worth and the law of diminishing returns probably applies.)
Problem
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.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); ``` This shows and hides the indicator and also doesn't freeze the browser. You get to watch the DOM elements being hidden as it works, which is what I was going for.