Question

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

目前，我每10秒刷新一次，清空所有div，然后遍历活动小部件并将它们放置在每个应该去的地方，并根据状态和类似的东西来设置颜色代码。然而，当javascript清空div并且重新填充时，眨眼的时间只有一小部分，并且它真的很烦人。

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

我一开始的想法是有一种方法可以＆＃34;冻结＆＃34;屏幕持续2秒钟，让它在后台重写然后解冻，这样就不会闪烁。

OR，这将是多么酷的，是一些如何我只更新在10秒间隔内更新的部分。因此，如果一个小部件从临时区域进入成型，它会逐渐消失，并逐渐消失，并且不会触及任何其他div。这很酷，因为我可以通过这种方式添加一些动画。但是，我不确定如何有效地＆＃34;做这个。也许我有一个＆＃34;有源阵列＆＃34;存储一切是什么，然后AJAX拉出一个新数组并执行两者不匹配的变化？

无论如何，我想知道是否有屏幕冻结，在后台回答中更新，以及是否与所描述的第二个相似。

对不起小说=（

Answer 1

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

正在发生的事情是您的div正在清空，但您的新数据还没有准备好填充它们。

解决方案是在成功完成ajax请求的回调中容纳你的divs清空并重新填充。

Answer 2

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

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

解决方案1 当您获得新结果时，构建一串html。在循环中执行此操作，每次添加到字符串变量，然后替换＆＃34;包装器的#hc; 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身份证明。这将更加复杂，但它可以让您单独更新显示中的单个项目，或仅在更改时更新。

<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");
}

AJAX刷新闪烁屏幕

2 个答案: