JavaScript:定时器刷新具有相同类的元素的内容

Question

我正在设计一个网络应用程序。我在前端使用 AngularJS，后端使用 Java。 Web 应用程序以 war 文件形式部署到本地 JBoss 服务器。我目前有一个 Java 类，它执行一系列计算并每 10 秒将数据以 JSON 形式发送到客户端。这可行，但我想使用 AJAX(?) 更新包含此数据的元素。

在 Angular 中，我有一些使用 Java RESTful API 的 $resource 服务。这是所有 JSON 数据，由单个 Controller 传播到 View 中。然后我有一些由 ng-repeat 生成的 HTML 元素，它们都具有相同的类。我想使用其中一个类每 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 的方式将破坏我的用户界面，这是在一系列更新后发生的。

主线程上的同步 XMLHttpRequest 已被弃用，因为它会对最终用户的体验产生不利影响。如需更多帮助，请查看 http://xhr.spec.whatwg.org/。

我有几个问题

1. 能否使用 AJAX 中的类更新元素的内容，还是只能使用 ID？
2. 我应该使用 AJAX 刷新页面吗？
3. 如果没有，那么我将如何使用 Angular 实现它？

Answer 1

从 javascirpt 进行同步网络调用会阻塞主线程，这可能会阻塞您的 UI，因此不建议这样做。回答您的问题。

1. 当您使用 Angular 时，您不应该使用类或 ids(使用选择器)访问元素，就像我们使用 jQuery 那样。相反，您应该使用数据绑定(bind)。
2. 您不需要 AJAX 来刷新页面。

3. 您可以使用现有的$resource来检索数据。一旦 Controller 中有数据，请将其保存在范围变量中。然后，您可以使用 Angular-Expression 在 HTML 中使用相同的变量来更新数据。

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