jQuery异步函数调用，无AJAX请求

Question

这似乎很愚蠢，但我找不到如何使用不涉及某些服务器端请求的 jQuery 进行异步函数调用。我有一个缓慢的函数，它遍历了很多 DOM 元素，我希望浏览器在这个函数运行时不会冻结。我想在调用慢速函数之前显示一个小指示器，然后当慢速函数返回时，我想隐藏指示器。我有以下内容：

$('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;
});

目前我提交表单，没有显示指标，浏览器死机，然后slowFunctionCall就完成了。

编辑：我使用Vivin's answer，特别是Sitepoint link 来获得以下解决方案：

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

这会显示和隐藏指示器，也不会冻结浏览器。您可以看到隐藏的 DOM 元素，这正是我想要的。

Answer 1

Javascript 在单线程中运行，因此如果您的函数速度较慢，它将阻塞其他所有内容。

更新

这将做一些你想要的，但请记住，它们在 IE 中没有广泛支持（我认为它们将在 IE10 中）。

一些关于 Web Workers 的资源：

• Using Web workers
• Wikipedia article on Web Workers
• WHATWG: Web Workers

这里有一些关于在没有网络工作者的情况下完成多线程的资源。需要注意的是，这不是“真正的”多线程：

• Multi-threading in Javascript（标题有点误导；这不是真正的多线程）
• Why doesn't Javascript support multi-threading?
• Is there some way to do multi-threading in Javascript?
• Simulating multi-threading using IFRAMEs（我不确定这种方法的可行性；它可能比它的价值更麻烦，而且收益递减规律可能适用。）

Answer 2

我打算建议查看超时，但唉。 John Resig（来自 jQuery）的这篇文章解释了 JavaScript 如何处理其单线程。 http://ejohn.org/blog/how-javascript-timers-work/

This article 还解释说：“在 JavaScript 中异步执行函数时要记住的一点是，页面中的所有其他 JavaScript 执行都会暂停，直到函数调用完成。这就是当前所有浏览器执行 JavaScript 的方式，并且可能导致如果您尝试同时异步调用太多东西，则会出现真正的性能问题。长时间运行的函数实际上会为用户“锁定”浏览器。同步函数调用也是如此。”

话虽如此，您可以自己模拟一个异步函数调用，方法是将您正在执行的任何循环分成一个较小的块并使用 setTimeout()。

例如这个函数：

// 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

你可能想要web workers!

编辑：我很惊讶有多少人跳到“不可能”，所以我会详细说明。 Web Workers 是HTML 5 spec 的一部分。它们允许您生成线程以在后台运行脚本而不会阻塞 UI。它们必须是外部js文件，被调用

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

并通过事件进行通信。