Как вы обрабатываете занятые значки на сайте AJAX?
Этот вопрос касается проблем параллелизма. Рекомендации по отображению значка занятости см. В этом вопросе: Javascript - индикатор загрузки / занятости или прозрачный div поверх страницы при нажатии на событие
Когда пользователь инициирует запрос AJAX на странице, полезно показать какой-то значок «работает» или «занято» или индикатор выполнения. Если есть только один длительный процесс, с ним можно справиться относительно просто:
function do_action() {
show_busy_icon();
long_running_asynchronous_process(function() {
// Callback function run when process finishes
hide_busy_icon();
});
}
Однако, если на странице запущено несколько асинхронных процессов, использование методов включения / выключения не сработает. Первый завершенный процесс отключает значок, даже если выполняются дополнительные процессы.
Итак, как вы справляетесь с отображением индикатора на веб-странице, который включен, когда запущен один или несколько процессов, и выключен, когда процессы не запущены?
Я полагаю, что можно было бы вести подсчет количества запущенных процессов. hide_busy_icon() скрывает значок только в том случае, если количество процессов равно 0. Это похоже на сбой. Возможно, есть лучший / более простой способ, которого я не вижу.
Спасибо за идеи и предложения!
Обновлено: после некоторого времени поработав с решением в отмеченном ответе, я рад сказать, что оно работает очень хорошо. Единственная проблема, с которой я столкнулся, - это случаи, когда мои собственные скрипты вызывают функции скриптов, которые я не контролирую. Если эти функции не позволяют использовать обратные вызовы, невозможно обновить счетчик процессов, когда они начинаются и заканчиваются.
Примером того, где это может происходить, является добавление набора маркеров на карту Google. Как только мой сценарий вызывает функцию карт Google, значок занятости исчезает, а маркеры все еще загружаются.
Я не уверен, как с этим справиться.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
Пожалуйста, посмотрите мой ответ здесь:
Как отображать экран загрузки при загрузке контента сайта
Я даю небольшой рабочий пример JavaScript, как это сделать, надеюсь, это поможет.
Через 1 секунду url1 возвращает ответ и отключает значок «занято». У вас есть 4 секунды, когда url2 работает, но значок не отображается.
Думаю, проблема в том, что вы используете только один индикатор. Возможно, будет проще иметь индикатор для каждого действия, в котором он нужен.
Итак, если у вас есть несколько поисков на странице, каждая область поиска будет иметь собственный независимый индикатор, который отображается или скрывается в соответствующих функциях javascript.
Если вам нужен один и тот же индикатор занятости для всех действий, используйте счетчик.
Вместо show_busy_icon () выполните «increment_busy_count ()», который вызывает «show_busy_icon ()», если счетчик занятых переходит от 0 до 1. Вместо «hide_busy_icon ()» выполните «Decment_busy_count ()», который вызывает "hide_busy_icon ()", если счетчик занятых переходит от 1 до 0.
Опытный образец имеет это встроенное; свойство Ajax.activeRequestCount отслеживает, сколько запросов активно в любой момент времени. Это также позволит вам настроить глобальные ответчики Ajax, чтобы определять, показывать или скрывать значок «занято».
Предлагаю другое решение. это не проверенный код, вероятно, не будет работать, но является иллюстрацией концепции.
Я предполагаю, что одно и то же точное действие не выполняется в нескольких экземплярах. Я делаю это, чтобы гарантировать, что тайм-ауты или аналогичные проблемы при обмене данными не приводят к зависанию индикатора, но позволяют разрешить индикатор при восстановлении связи.
var actionRegister = new Array();
function register_action(actionId)
{
show_busy_icon();
if (blockedTile.indexOf(actionId) != -1)
{ // element already registered
return;
}
actionRegister.push(actionId)
}
function unregister_action(actionId)
{
var idx = blockedTile.indexOf(actionId);
if (idx != -1)
{
actionRegister.splice(idx,1);
}
if (actionRegister.length < 1)
{
hide_busy_icon();
}
}
Мы все смотрим на это неправильно. Вызовы Ajax используются для загрузки контента с помощью XHR. Это означает, что во всей DOM должен быть какой-то предопределенный элемент, куда загружается контент. скажем, у нас есть html такого типа:
<html>
<body>
<div id = "content_1">
</div>
<div id = "content_2">
</div>
</body>
</html>
Используя jQuery, скажем, мы хотим загрузить в content_1 и content_2 из content_1.php и content_2.php соответственно.
Используйте следующий скрипт для обработки ajax ::
$("content_1").html("<img src='loading.gif'>").load("http://samplesite.com/content_1.php");
$("content_2").html("<img src='loading.gif'>").load("http://samplesite.com/content_2.php");
Это поместит загружаемый gif в соответствующие div, а gif позже будет заменен загруженным контентом из файла php. Простой однострочный скрипт. Счетчик не требуется.
Требование: любая последняя версия jQuery.
Я не думаю, что ваш пример решает проблему. Предположим, у вас было два URL-адреса: url1 и url2.url1 загружается за 1 секунду, а url2 - за 5 секунд. Вызов load (url1) и load (url2) Оба показывают значок «занято».