jQuery + Ajax + Загрузка Spinner Image = Too Fast!

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

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

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

Затем замените АЯКС вызов с этим один:

$.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, если вы получите странное поведение из-за таймера.

Answer 2

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

Answer 3

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

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

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

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

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

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

Тогда вы не должны включать отображения и скрытия spinner w/every call to $.ajax.