Question

我正在尝试建立一个网站，其中包含类似于Facebook的在线用户列表，其中显示用户最后一次活动的时间。我的主要问题可能与jQuery和PHP部分有关，所以我会给你所有必要的细节。

实际问题：每当jQuery运行setInterval（）函数时，我的DIV内容我想插入闪烁（看起来你只刷新div）。这只发生在Chrome上，在所有其他浏览器中，包括Edge和IE，它运行正常。

我需要解决的另一个问题：与闪烁相同，如果我在浏览器中选择部分文本，并且更新发生，则选择是否明显删除。我想知道是否有任何方法可以单独选择，以便选择保持原样，但内容仍然按照给定的时间间隔进行更新（我知道从哪里开始这个，所以如果你有任何提示或请技巧，想分享，我会感恩）。

一些信息：在尝试解决这个问题时我注意到了很少的事情（我非常恼火，我不是一个熟练的程序员，我连续第二天试图解决它）：1。每当我只返回一个简单的字符串时，它不会闪烁。我在返回时添加HTML标签的那一刻，闪烁开始，即使它是一个简单的标签。 2.奇怪的是，当我点击页面上的任何地方时，闪烁停止了（嗯，什么？）。当我刷新时，它闪烁，当我点击网站上的任何地方时，闪烁停止。 3.我测试了Vivaldi的Chrome，Firefox，IE，Edge和beta版本，但没有一个有闪烁问题，尽管它们都有选择消失的问题。 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;

 }

最后在线计算的功能。每个用户在数据库中都有一个last_seen字段。这将运行查询，然后使用TIMESTAMPDIFF计算当前时间与last_seen时间之间的差异（以分钟为单位）。

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

过去2天我一直在谷歌搜索，发现一些有类似问题的线程，但没有任何效果。这可能是由缓存或其他原因引起的吗？在这些事情上我不是一个非常熟练的人，所以请详细说明你的答案。提前致谢！如果您还有其他任何想要我提供的内容，请发送回复，我会这样做。

Answer 1

setInterval()：

重复调用函数或执行带有修复的代码片段每次通话之间的时间延迟。返回intervalID。

使用hello||you时遇到的“闪烁”效果通常是

您可以使用自调用setInterval()：

来缓解此问题

setTimeout()

Chrome中还有一个known bug可能导致这种闪烁发生 - 或者至少可以解释为什么它可能只发生在Chrome浏览器而不是其他浏览器中。

对于你的第二个问题，我不确定“文本”是什么，但假设它是一个function updateOnlineList() { $.get('?p=fh&ref=tests', function (data) { // only need one line... $("#online").empty().html(data); }); } $(document).ready(function () { setTimeout(updateOnlineList, 2000); });元素（或者其他什么），你可以告诉jQuery使用blur()检测元素何时失去焦点：

完整示例：

input

由Chrome jquery php

1 个答案: