我正在尝试建立一个网站，其中包含类似于Facebooks的在线用户列表，它显示用户上次活动的时间。我的主要问题可能与jQuery和PHP部分有关，所以我将为您提供所有必要的细节。
实际问题：每当jQuery运行setInterval（）函数时，我要插入内容的DIV就会闪烁（看起来只刷新DIV）。这种情况只发生在Chrome上，在其他所有浏览器中，包括Edge和IE，它都能正常工作。
我需要解决的另一个问题：与闪烁相同，如果我在浏览器中选择了部分文本，并进行了更新，则该选择将被明显删除。我想知道是否有任何方法可以单独使用它，以便选择保持原样，但内容仍会在给定的时间间隔内更新（我不知道从哪里开始，所以如果你有任何技巧或窍门想分享，我将不胜感激）。
一些信息：在试图解决这个问题时，我几乎没有注意到什么（我非常恼火，我不是一个熟练的程序员，我连续第二天试图解决它）：1。每当我只返回一个简单的字符串时，它不会闪烁。当我在返回中添加HTML标记时，即使它是一个简单的标记，也会开始闪烁。2.神奇的是，当我点击页面上的任何地方时，闪烁都会停止（嗯，什么？）。当我刷新时，它会闪烁，当我用鼠标点击网站上的任何地方时，闪烁就会停止。3.我测试过Chrome、Firefox、IE、Edge和Vivaldi的测试版，它们都没有闪烁的问题，尽管它们都有选择消失的问题。4.如果你愿意，我可以提供一个链接到我运行这个程序的页面。请记住，这是一个业余项目，所以如果你遇到新手程序员的致命错误，请不要恨我：）
下面是我正在使用的PHP函数。用于生成返回字符串的函数。
public function returnOnlineList() {
GLOBAL $db;
$sql = "SELECT username, last_seen FROM users";
$stmt = $db->prepare($sql);
$stmt->execute();
$row = $stmt->fetchAll();
$val = "";
foreach ($row as $p) {
$val = $val."<li class ='list-group-item' style='height: 50px; '><div class='whatss'><div class='nick' style='float: left; width: 64%;'><img class='img-circle' width='20px' height='20px' style='background-color: #eee; '></img>".$p['username']."</div><div class='active' style='float: left; width: 36%; ' >".self::lastOnline($p['username'])."</div></div></div>";
}
return $val;
}
上次联机计算的函数。每个用户在数据库中都有一个lastrongeen字段。这将运行一个查询，然后使用TIMESTAMPDIFF以分钟为单位计算当前时间和上次设置时间之间的差值。
public function lastOnline($value) {
GLOBAL $db;
// Calculating last_seen against NOW() on server to see when user was last online.
$sql = "SELECT last_seen FROM users WHERE username = '$value'";
$stmt = $db->prepare($sql);
$stmt->execute();
$row = $stmt->fetch();
$ssql = "SELECT TIMESTAMPDIFF(MINUTE, '$row[0]', NOW())";
$sstmt = $db->prepare($ssql);
$sstmt->execute();
$rrow = $sstmt->fetch();
if ($rrow[0] > 60){
$retval = $rrow[0] / 60;
$minval = round(fmod($retval, 1) * 60, 2);
$hval = round($retval);
return $hval."h; ".$minval."m. ";
}
else if ($rrow[0] < 10) {
return "Active now";
}
else if (($rrow[0] < 60) && !($rrow < 10)) {
return $rrow[0].' min';
}
unset($stmt);
unset($sstmt);
}
jQuery部分。我试过简单地使用.html（），得到了完全相同的问题。.append（）和.prepend（）不会导致闪烁。闪烁与.html（）一起出现，在下面的情况下，当我在写入html元素之前清空它时。
$( document ).ready(function() {
window.setInterval("updateOnlineList()", 2000);
});
function updateOnlineList() {
$.get('?p=fh&ref=tests', function(data) {
var stuff = data;
$("#online").empty();
writeTo(data);
});
}
function writeTo(message) {
var div = document.getElementById('online');
div.innerHTML = div.innerHTML + message;
}
在过去的两天里，我一直在谷歌上搜索，发现一些线程也有类似的问题，但什么都不起作用。这可能是由缓存或其他原因引起的吗？我在这方面不是一个很熟练的人，所以请在你的回答中详细说明。提前感谢！如果你还想让我提供什么，请回复我，我会这么做的。
setInterval():
重复调用函数或执行代码段每次呼叫之间的时间延迟。返回intervalID。
setInterval()的"闪烁"效果通常是在函数完成上一次调用之前调用时产生的。
您可以通过使用自调用setTimeout():来缓解这种情况
function updateOnlineList() {
$.get('?p=fh&ref=tests', function (data) {
// only need one line...
$("#online").empty().html(data);
});
}
$(document).ready(function () {
setTimeout(updateOnlineList, 2000);
});
Chrome中还有一个已知的错误可能会导致这种闪烁——或者，至少可以解释为什么它可能只在Chrome中发生，而不是在其他浏览器中发生。
对于您的第二个问题，我不确定"文本"是什么，但假设它是input元素（或其他任何元素），您可以告诉jQuery使用blur():检测元素何时失焦
完整示例：
$(document).ready(function () {
var elem;
// get the element that's lost focus
$('input').on('blur', function () {
elem = this;
});
function updateOnlineList() {
$.get('?p=fh&ref=tests', function (data) {
// only need one line...
$("#online").empty().html(data);
// set the focus
$(elem).focus();
// this line was missing originally...
setTimeout(updateOnlineList, 2000);
});
}
setTimeout(updateOnlineList, 2000);
});