Javascript AJAX刷新闪烁屏幕

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

目前，我每10秒刷新一次，清空所有div，然后循环遍历活动的小部件，并将它们放置在它们应该去的地方，以及基于状态和诸如此类的东西的颜色代码。然而，当javascript清空div和重新填充div时，会有几分之一秒的眨眼时间，老实说，这很烦人

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

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

或者，更酷的是，我只更新在10秒内更新的片段。因此，如果一个小部件从暂存区转到成型区，它会淡出暂存区并淡入成型区，而其他div都不会被触摸。这会很酷，因为我可以这样添加一些动画。然而，我不知道如何“有效地”做到这一点。也许我有一个“活动数组”来存储所有内容，然后AJAX提取一个新数组，并在两者不匹配的地方执行更改

无论如何，我想知道是否有一个屏幕冻结，更新的背景答案，如果有一个类似的第二个描述

---

很抱歉，这是ajax异步行为的结果

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

---

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

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

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

---

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

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

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

解决方案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);

var htmlString=''；
for（var i=0；i”；
}
$（'#wrapper div'）.empty（）.append（htmlString）；

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

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

---

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

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

解决方案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);

var htmlString=''；
for（var i=0；i”；
}
$（'#wrapper div'）.empty（）.append（htmlString）；

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

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

太棒了。为什么我没有仔细考虑一下。我想这更多的是cpu处理时间而不是服务器延迟。我会尝试一下，因为我已经准备好很容易地进行尝试。要获得更平滑的结果，请参阅我关于
documentFragment
和
replaceChild
的评论，呸，不起作用。在成功中添加了我的ClearScreen功能ss是AJAX的一部分。将刷新和清除移到完成而不是成功有什么关系吗？我已经做了更改，一段时间没有查看，但是闪烁消失了。我想知道我是否没有将新的页面加载到服务器，或者是否需要硬刷新页面，但这解决了问题。我没有将其移到AJAX调用的完整部分，ju成功中的st。我相信这里的其他解决方案会起作用，我仍然会尝试，这样我就可以获得se动画，但那是版本1.2可能是o.OBrilliant。为什么我没有仔细考虑。我认为这更多的是cpu处理时间，而不是服务器延迟。我会尝试一下，因为我已经准备好很容易地尝试。为了更平滑er结果，请参阅我关于
documentFragment
和
replaceChild
Bah的评论。没有起作用。将我的ClearScreen功能添加到AJAX的成功部分。将刷新和清除移到完成位置而不是成功有什么关系吗？我已经做了更改，但闪烁消失了。我想知道我是否没有这样做将新的加载到服务器上，或者如果我需要硬刷新页面，但这解决了问题。我没有将其移动到AJAX调用的完整部分，只是成功了。我确信这里的其他解决方案会起作用，我仍然会尝试，以便能够获得se动画，但这是版本1.2可能是o.OI真的希望#2成为我的最终目标ame因为淡出和淡入的美学，但你是对的，这将是相当困难的。这将是以后的优化。我来bac