jQuery的异步函数调用，没有AJAX请求 [英] jQuery asynchronous function call, no AJAX request

问题描述

这似乎很傻，但我找不到怎么办与jQuery的异步函数调用，这并不涉及到一些服务器端请求。我有一个通过大量的DOM元素遍历一个缓慢的功能，我想浏览器不会冻结了，而这个功能正在运行。我想显示一个小指示灯被称为慢函数之前，那么当慢函数返回时，我想隐藏的指标。我有以下几点：

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

目前我提交表单，并没有显示指示，浏览器冻结，然后 slowFunctionCall 完成。

Currently I submit the form and the indicator isn't displayed, the browser freezes, and then slowFunctionCall is finished.

编辑：我用<一个href=\"http://stackoverflow.com/questions/6836299/jquery-asynchronous-function-call-no-ajax-request/6836335#6836335\">Vivin's回答，特别是 Sitepoint链接得到以下解决方案：

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

这显示和隐藏的指示，也不会冻结浏览器。你看被隐藏的DOM元素，因为它的工作原理，这是我要的。

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.

推荐答案

JavaScript为单个线程上运行，因此，如果你有一个缓慢的功能它的将会的阻止一切。

Javascript runs in a single thread and therefore if you have a slow function it will block everything else.

更新

这会做一些你想要的东西，但要记住，他们不是广泛的支持支持在IE（我认为他们将在IE10）。

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:

• 使用Web工人


• 维基百科上的网络工作者
文章

• WHATWG：网络工作者

• 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:

• 多线程的Javascript （标题是有点误导，它不是真正的多线程）


• 为什么不支持javascript多线程？


• 是否有某种方式做在Javascript多线程？


• 使用模拟的IFRAME 多线程（我不知道怎么样可行的这种方法;比它的价值和收益递减的规律可能适用，可能更麻烦）

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

这篇关于jQuery的异步函数调用，没有AJAX请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！