2015-03-16 2 views
-1

У меня есть веб-приложение, созданное с Ember.js и node.js, которое имеет опцию swtich между 3-мя языками. Слова хранятся в json-файлах. На данный момент я использую синхронный вызов ajax для извлечения данных для всех страниц (около 7 или 8 вызовов). ФункцияЗагрузка экрана с синхронным вызовом ajax

function translate(iso,coll) 
 
{ 
 
    var x = jQuery.parseJSON(
 
     jQuery.ajax({ 
 
      url: window.location.origin+'/translate?iso='+iso+'&coll='+coll, 
 
      async: false, 
 
      dataType: 'json', 
 
      success : function(){ 
 
      } 
 
     }).responseText 
 
    ); 
 
    console.log(x); 
 
    return x; 
 
};
Мой вопрос заключается в том, как можно показать анимированный экран laoding, пока мои звонки не сделаны. Спасибо.

+0

Вы не можете. Он должен быть выполнен async для вас, чтобы сделать это ... – deostroll

+0

Проблема в том, что я не могу, потому что все представления в Ember зависят от данных из json, если я поставил async true, это порождает ошибку – Niko

+1

Тогда это ваш фактический проблема, которую вам нужно отправить после создания своего рода [mcve] (http://stackoverflow.com/help/mcve) – deostroll

ответ

1

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

HTML

<div id="dvLoading" style=" 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.2); 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    display: none; 
"> 
    Loading 
</div> 

JAVASCRIPT

function translate(iso,coll) 
{ 
    $("#dvLoading").show(); 
    var x = jQuery.parseJSON(
     jQuery.ajax({ 
      url: window.location.origin+'/translate?iso='+iso+'&coll='+coll, 
      async: false, 
      dataType: 'json', 
      success : function(){ 
       $("#dvLoading").hide(); 
      } 
     }).responseText 
    ); 
    console.log(x); 
    return x; 
}; 
0

AJAX:

Ajax (также AJAX;/eɪdʒæks /; коротка для асинхронного JavaScript и XML) 1 [3] представляет собой группу взаимосвязанных методов веб-разработки , используемых на стороне клиента для создания асинхронных веб-приложений. С помощью Ajax веб-приложения могут отправлять данные и получать с сервера асинхронно (в фоновом режиме), не мешая отображению и поведению существующей страницы . Данные можно получить с помощью объекта XMLHttpRequest. Несмотря на название, использование XML не требуется (JSON часто используется в варианте AJAJ), а запросы не должны быть асинхронными. [4]

взято с here.

Как вы можете видеть, AJAX по определению является асинхронным, поэтому парадоксально и неоптимально, чтобы сделать его синхронным. Вам нужно изменить свои функциональные возможности, чтобы ваш запрос мог выполняться асинхронно, и все в зависимости от него было бы инициализировано/вычислено в .done() или success(). Подробнее here.

Смежные вопросы