JavaScript：定时刷新相同class元素的内容

Question

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

在 Angular 中，我有几个 $resource 服务使用 Java RESTful API。这是所有 JSON 数据，这些数据由单个控制器传播到视图中。然后我有一些由 ng-repeat 生成的 HTML 元素，它们都具有相同的 classes。我想使用这些 classes 之一来每 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/.

我有几个问题

你能更新 AJAX 中带有 class 的元素的内容吗？还是说这只适用于 ID？
我应该使用 AJAX 刷新页面吗？
如果没有，那么我将如何用 Angular 实现它？

Answer 1

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

当您使用 angular 时，您不应使用 class 或 id（使用选择器）访问元素，就像我们使用 jQuery 时那样。相反，您应该使用数据绑定。
您不需要AJAX刷新页面。
您可以使用现有的 $resource 来检索数据。在控制器中获得数据后，将其保存在范围变量中。然后，您可以使用 angular 表达式在 HTML 中使用相同的变量来更新数据。

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

JavaScript：定时刷新相同class元素的内容

JavaScript: Timer to refresh content of elements with same class

javascript

ajax

partial-page-refresh

angularjs