AJAX 刷新闪烁屏幕

Question

我有一个应用程序，它有一个状态屏幕，该屏幕旨在始终显示在组织的各个地方。可能有 50 个不同的用户向其中输入不同的数据，状态屏幕每 10 秒更新一次新信息。它几乎是流经流程的小部件的跟踪板。

目前，我每 10 秒刷新一次，清空所有 div，然后循环通过活动小部件并将它们放置在每个它们应该去的地方，并根据状态和类似的东西设置颜色代码。但是，从 javascript 清空 div 到重新填充时，只有几分之一秒的时间，老实说，这很烦人。

我的问题是如何最好地更新没有闪烁的状态屏幕，内容只是清空并根据需要弹出。

我最初的想法是有一种方法可以“冻结”屏幕 2 秒钟，让它在后台重写，然后解冻，这样就不会眨眼了。

或者，这会更酷得多，这就是我只更新在 10 秒间隔内更新的部分的方式。因此，如果一个小部件从暂存区域进入成型，它会淡出暂存并淡入成型，并且不会触及其他 div。这会很酷，因为我可以通过这种方式添加一些动画。但是，我不确定如何“有效”地做到这一点。也许我有一个“活动数组”来存储所有内容，然后 AJAX 拉出一个新数组并在两者不匹配的地方执行更改？

无论如何，我想知道是否有屏幕冻结、在后台更新答案以及是否有类似第二个描述的情况。

对不起小说=(

Answer 1

这种闪烁或闪烁效果是 ajax 异步行为的结果。

发生的情况是您的 div 正在清空，但您的新数据尚未准备好填充它们。

解决方案是将 div 的清空和重新填充放在一个回调中，该回调传递给您的 ajax 请求的成功完成。

Answer 2

我认为当您在重新填充之前清除所有数据时会出现很多问题。

您可以尝试两种方法来解决此问题。

解决方案 1 当你得到你的新结果时，构建一个 html 字符串。在循环中执行此操作，每次添加到字符串变量，然后用新的 html 替换“包装器”div 的 html。你可以让它变得花哨，也可以进行淡入/淡出。

var htmlString = '';
for(var i=0; i < jsonReturn.length; i++)
{
    htmlString += "<p>" + jsonReturn[i].data + "</p>";
}

$('#wrapper-div").empty().append(htmlString);

解决方案 2 提供基于您正在重新填充的数据中的 id 值的 html id。这将相当复杂，但它可以让您单独更新显示中的单个项目或仅在它们发生更改时更新。

<p id="data-spot-<?php echo $data['id']; ?>">Some display data</p>

然后在你的javascript中你会做

for(var i=0; i < jsonReturn.length; i++)
{
    $('#data-spot"+jsonReturn.id).empty().append("Some html string or data");
}