Как вы обрабатываете занятые значки на сайте AJAX? - PullRequest
Новая
       11

Как вы обрабатываете занятые значки на сайте AJAX?

2 голосов
/ 09 декабря 2008

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

Я не уверен в хорошем способе справиться с этим.

Ответы [ 6 ]

8 голосов
/ 09 декабря 2008

Если вам нужен один и тот же индикатор занятости для всех действий, используйте счетчик.

Вместо «show_busy_icon ()» выполните «increment_busy_count ()», который вызывает «show_busy_icon ()», если число занятых изменяется от 0 до 1. Вместо «hide_busy_icon ()» выполните «decment_busy_count ()» , который вызывает «hide_busy_icon ()», если число занятых изменяется от 1 до 0.

1 голос
/ 09 декабря 2008

Прототип имеет эту встроенную функцию; свойство с именем Ajax.activeRequestCount отслеживает, сколько запросов активно в любой момент времени. Это также позволит вам настроить глобальные ответчики Ajax, чтобы определить, скрывать или показывать значок «занят».

1 голос
/ 09 декабря 2008

Я думаю, что проблема в том, что вы используете только один индикатор. Может быть проще иметь индикатор для каждого действия, в котором он нужен.

Таким образом, если у вас есть несколько поисков на странице, каждая область поиска будет иметь свой собственный независимый индикатор, который отображается или скрывается в соответствующих функциях JavaScript.

0 голосов
/ 31 декабря 2012

Мы все смотрим на это неправильно. 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.

0 голосов
/ 18 апреля 2012

Я предлагаю другое решение. это не проверенный код, вероятно, не будет работать, но является иллюстрацией концепции.

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

 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();
    }
}
0 голосов
/ 09 декабря 2008

Пожалуйста, смотрите мой ответ здесь:

Как отобразить экран загрузки при загрузке контента сайта

Я приведу небольшой, работающий пример JavaScript, как это сделать, надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...