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