AJAX 刷新闪烁屏幕

Question

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

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

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

我最初的想法是有没有办法 "freeze" 屏幕显示 2 秒，让它在后台重写然后解冻，这样就不会出现闪烁。

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

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

对不起小说=(

Answer 1

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

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

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

Answer 2

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

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

解决方案 1 当您得到新结果时，构建一个 html 的字符串。在循环中执行此操作，每次都添加到字符串变量，然后用新的 html 替换 "wrapper" div 的 html。你可以把它做得很花哨，也可以做一个淡入淡出 in/fade。

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

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

方案二根据您要重新填充的数据中的 id 值，提供您的 html id。这将相当复杂，但它可以让您更新显示中的单个项目dividually 或仅当它们发生变化时。

<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 刷新闪烁屏幕

AJAX Refresh Blinks Screen

javascript

php

ajax

jquery

refresh