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

问题描述

这看起来很傻，但我找不到如何使用 jQuery 执行不涉及某些服务器端请求的异步函数调用.我有一个缓慢的函数，它遍历很多 DOM 元素，我希望浏览器在这个函数运行时不会冻结.我想在调用slow 函数之前显示一个小指示器，然后当slow 函数返回时，我想隐藏该指示器.我有以下几点:

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.

我使用了Vivin 的回答，特别是 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).

关于 Web Workers 的一些资源:

Some resources on Web Workers:

• 使用网络工作者
• 维基百科关于网络工作者的文章
• WHATWG:网络工作者

这里有一些关于在没有 Web Worker 的情况下完成多线程的资源.重要的是要注意这不是真正的"多线程:

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屋！