JavaScript: таймер для обновления содержимого элементов с тем же классом

Question

Существует веб-приложение, которое я разрабатываю. Я использую AngularJS в интерфейсе с Java-интерфейсом. Веб-приложение развертывается в файле war на локальном сервере JBoss. В настоящее время у меня есть класс Java, который выполняет серию вычислений и отправляет эти данные как JSON клиенту каждые 10 секунд. Это работает, но я хочу обновить элементы, содержащие эти данные, с помощью AJAX (?).

В Угловом У меня есть несколько $resource услуг, которые используют API Java RESTful. Это все данные JSON, которые передаются в представление одним контроллером. Затем у меня есть некоторые HTML-элементы, сгенерированные ng-repeat, которые имеют одинаковые классы. Я хотел использовать один из этих классов, чтобы вызвать обновление всех элементов каждые 10 секунд. Вот отрывок с ng-repeat я говорю:

<div ng-repeat="mq in mqDepth"> 
    <progressbar class="mq" max="max" value="dynamic" ng-init="dynamic=mq.currentDepth" type="info> 
     <span> 
      {{dynamic}}/{{max}} 
     </span> 
    </progressbar> 
</div> 

В приведенном выше фрагменте кода, данных, который обновляется в mq.currentDepth.

И это код, я использую, чтобы обновить:

function refreshQueue() { 
    $('.mq').load('', function() { 
     $(this).unwrap(); 
    }); 
} 

refreshQueue(); 
setInterval(function() { 
    refreshQueue(); 
}, 10000); 

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

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

У меня есть несколько вопросов

1. Вы можете обновить содержимое элемента с классом в AJAX, или же, что работает только с идентификаторами?
2. Должен ли я использовать AJAX для обновления страницы?
3. Если нет, то как мне реализовать это с помощью углового?

Answer 1

Выполнение синхронных сетевых вызовов из javascirpt блокирует основной поток, который может блокировать ваш пользовательский интерфейс и, следовательно, не рекомендуется. Чтобы ответить на ваши вопросы.

1. Если вы используете угловой, вы не должны обращаться к элементам с помощью класса или идентификаторов (с использованием селекторов), как мы используем JQuery. Вместо этого вы должны использовать привязку данных.
2. Для обновления страницы вам не нужен AJAX.

3. Вы можете использовать существующие $resource s для извлечения данных. После того, как у вас есть данные в контроллере, сохраните его в переменной области. Затем вы можете использовать те же переменные в своем HTML, используя угловое выражение для обновления данных.

   $scope.mqDepth = MqDepth.get({ id: id });