jQuery asynchronous function call, no AJAX request

Question

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.

Answer 1

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.)

Answer 2

I was going to suggest looking at a timeout but alas. This post by John Resig (of jQuery) explains a bit about how JavaScript handles its single thread. http://ejohn.org/blog/how-javascript-timers-work/

This article also explains: "One thing to remember when executing functions asynchronously in JavaScript, is all other JavaScript execution in the page halts until a function call is completed. This is how all the current browsers execute JavaScript, and can cause real performance issues if you are trying to call too many things asynchronously at the same time. A long running function will actually "lock up" the browser for the user. The same is true for synchronous function calls too."

All that said, it's possible you could simulate an asynchronous function call yourself by breaking whatever loop you are doing into a smaller chunk and using setTimeout().

For instance this function:

// Sync
(function() {
  for(var x = 0; x < 100000; ++x) {console.log(x)}
})()

// ASync
var x = 0;
setTimeout(function() {
   console.log(x++);
   if(x < 100000) setTimeout(arguments.callee, 1);
} ,1)

Answer 3

You might want web workers!

Edit: I'm surprised how many people jumped to "its not possible" so I will elaborate. Web Workers are part of the HTML 5 spec. They allow you to spawn threads to run scripts in the background without blocking the UI. They must be external js files, are invoked by

var worker = new Worker('my_task.js');

and are communicated to via events.