Chrome jquery php中的setInterval导致的DIV闪烁
DIV flickering caused by setInterval in Chrome jquery php
我正在尝试建立一个网站,其中包含类似于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);
});
- 添加文字和评论功能更新Div
- 为什么在单独的函数中应用时转换会闪烁/断断续续(D3)
- 使用jQuery以红色和黑色闪烁文本
- 点击后隐藏潜水?(但如果Div是一面旗帜呢?)
- JavaScript Cookie会在瞬间闪烁隐藏的DIV
- 当我将鼠标悬停在iframe上时,DIV会闪烁
- 当鼠标悬停在其上时,Div 会闪烁
- JQuery 淡入/淡出会导致其他 DIV 闪烁
- IE和Safari中闪烁的粘性绝对DIV
- 闪烁DIV 5秒,然后使用jQuery在1秒后将其隐藏
- Chrome jquery php中的setInterval导致的DIV闪烁
- jquery在执行.hide()和.fadeIn()方法之前闪烁Div元素
- DIV幻灯片闪烁
- 当有新消息进来时,闪烁DIV
- 将Div设置为空,然后重新填充,因为我的页面会在所有元素中闪烁
- Div背景色在动画前闪烁白色
- Jquery不工作在ASP.net DIV只是闪烁,并将卡在它的位置
- Jquery显示/隐藏DIV,并使其闪烁时,它显示
- 经过淡入/淡出循环的Div突然闪烁
- Div在jquery动画期间闪烁