вызов асинхронной функции jQuery, без запроса AJAX

это кажется глупым, но я не могу найти, как сделать асинхронный вызов функции с jQuery, который не включает какой-либо запрос на стороне сервера. У меня есть медленная функция, которая повторяет множество элементов DOM, и я хочу, чтобы браузер не зависал во время работы этой функции. Я хочу отобразить небольшой индикатор перед вызовом функции slow, затем, когда функция slow вернется, я хочу скрыть индикатор. У меня есть следующее:

$('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 закончена.

Edit: Я Vivin это, в частности ссылка Sitepoint чтобы получить следующее решение:

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 скрываются, когда это работает, что я и собирался сделать.

3 ответов


Javascript работает в одном потоке, и поэтому, если у вас есть медленная функция, она будет заблокировать все остальное.

обновление

Что будет делать то, что вы хотите, но имейте в виду, что они не широко поддерживается поддерживается в IE (я думаю, что они будут в IE10).

некоторые ресурсы веб-работников:

вот несколько ресурсов по выполнению многопоточности без веб-работников. Важно отметить, что это не "true" многопоточность:


Я собирался предложить посмотреть на тайм-аут, но, увы. Этот пост Джона Resig (of jQuery) немного объясняет, как JavaScript обрабатывает свой единственный поток. http://ejohn.org/blog/how-javascript-timers-work/

в этой статье также объясняет: "одна вещь, которую нужно помнить при асинхронном выполнении функций в 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)

возможно, вы захотите веб-работников!

Edit: я удивлен, сколько людей перескочили на "это невозможно", поэтому я расскажу подробнее. Веб-работники являются частью HTML 5 spec. Они позволяют создавать потоки для запуска скриптов в фоновом режиме без блокировки пользовательского интерфейса. Они должны быть внешними JS-файлами, вызываемыми

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

и передаются через события.