jQuery + Ajax + Загрузка изображения Spinner = Слишком быстро!

Question

Я использую jQuery на моей странице ASP.NET MVC 2. Это супер простое сообщение, которое получает взамен дату. Сам процесс проходит очень быстро. Я хочу использовать изображение блесны, чтобы показать пользователю, что происходит. Все отлично работает в Firefox, тестирование локально. Однако в IE 8 изображение прядильщика отображается недостаточно долго; это просто мерцает. Это может сбить с толку конечного пользователя, если он не видит указание, что процесс работает / завершен. Как лучше всего решить эту проблему?

Спасибо.

 <img id="signedout<%: item.Id %>" src="/Content/Images/signed_out.png" alt="Signed Out" title="Signed Out" style="display:none" />
                <div id="ajaxloader<%: item.Id %>" style="display:none;text-align:center"><img src="/Content/Images/ajax-loader.gif" alt="loading..." title="loading..." /></div>

                <script type="text/javascript">
                    $(function () {
                        var id = "<%: item.Id %>";

                        $("#signout" + id).click(function () {
                            if (confirm("Are you sure you want to sign this visitor out?")) {

                                $(this).hide();
                                //$("#signout" + id).hide();
                                $("#ajaxloader" + id).show();

                                var url = '<%: Url.Action("signout") %>';

                                $.ajax({
                                    type: "POST",
                                    url: url,
                                    data: "id=" + id,
                                    success: function (result) {
                                        $("#timeout" + id).append(result);
                                        $("#ajaxloader" + id).hide();
                                        $("#signedout" + id).show();
                                        $("#row" + id).css("background", "#E8E8E8");
                                    },
                                    error: function () {
                                        alert("There was an unexpected error.  Please try again later.");
                                        $("#ajaxloader" + id).hide();
                                        $("#signout" + id).show();
                                    }
                                });
                            }
                        });
                    });   
                </script>

Answer 1

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

Это основано на ответе amurra и предназначено для того, чтобы либо скрыть счетчик, когда процесс загружен, если и только если тайм-аут уже был возвращен. Следовательно, если запрос AJAX возвращает «слишком быстро», он будет ожидать тайм-аут.

var timeoutComplete=false;
var requestComplete=false;

function HideLoadingSpinner() {
   if(requestComplete) {
      $("#ajaxloader" + id).hide();
   } else {
      timeoutComplete=true;
   }
}

Между тем, внутри обработчика щелчков ...

setTimeout(HideLoadingSpinner, 2000);

$.ajax({type: "POST",
   url: url,
   data: "id=" + id,
   success: function (result) {
      $("#timeout" + id).append(result);
      $("#signedout" + id).show();
      $("#row" + id).css("background", "#E8E8E8");
      if(timeoutComplete) {
         $("#ajaxloader" + id).hide();
      } else {
        requestComplete=true;
      }
   },
   error: function () {
      alert("There was an unexpected error.  Please try again later.");
      $("#ajaxloader" + id).hide();
      $("#signout" + id).show();
   }
});

EDIT: Я только что удалил материал if(timeoutComplete) из функции error, так как в любом случае перед ним будет alert.

Answer 2

Разве вы не можете просто показать сообщение «Данные загружены» на ярком фоне, которое исчезает через несколько секунд после перезагрузки?

Answer 3

Я видел это раньше. На самом деле то, что вы видите, это то, что IE тратит обычное количество времени на выполнение запроса, а FF занимает больше времени, чем следует . Вы можете установить network.dns.ipv4OnlyDomains на localhost в about:config, чтобы значительно ускорить FF на локальном хосте. Источник .

В моих собственных приложениях я следую совету @ Im0rtality и получаю уведомление о завершении запроса ajax и показываю счетчик, пока он выполняется. Много раз я даже не вижу прядильщика. Я использую пользовательскую реализацию JBar для своих уведомлений, которая очень профессионально выглядит.

Что касается показа счетчика во время вызовов AJAX, вы включаете его на главной странице, чтобы показать счетчик во время всех вызовов JQuery AJAX:

$(function () {
    $('.spinner')
    .hide()
    .ajaxStart(function () {
        $(this).show();
    })
    .ajaxStop(function () {
        $(this).hide();
    });
});

Тогда вам не нужно включать показ и скрытие счетчика с каждым вызовом $.ajax.

Answer 4

Вы можете установить время ожидания в js, и это гарантирует, что счетчик не будет скрыт до истечения времени ожидания:

    function HideLoadingSpinner() {
        $("#ajaxloader" + id).hide();
    }

Затем замените ваш вызов ajax следующим:

    $.ajax({type: "POST",
            url: url,
            data: "id=" + id,
            success: function (result) {
               $("#timeout" + id).append(result);
               setTimeout(HideLoadingSpinner, 2000);
               $("#signedout" + id).show();
               $("#row" + id).css("background", "#E8E8E8");
            },
            error: function () {
                alert("There was an unexpected error.  Please try again later.");
                setTimeout(HideLoadingSpinner, 2000);
                $("#signout" + id).show();
            }
    });

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