javascript - Chrome jquery php中setInterval引起的DIV闪烁

Question

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

实际问题:每当 jQuery 运行 setInterval() 函数时，我的包含我要插入的内容的 DIV 会闪烁(看起来您只刷新 div)。这只发生在 Chrome 上，在所有其他浏览器中，包括 Edge 和 IE，它都可以正常工作。

我需要解决的另一个问题:与闪烁一样，如果我在浏览器中选择了部分文本，并且发生了更新，则选择显然被删除了。我想知道是否有任何方法可以解决它，以便选择保持原样，但内容仍会按给定的时间间隔更新(我什至不知道从哪里开始，所以如果您有任何提示或技巧并想分享我将不胜感激)。

一些信息:在尝试解决这个问题时我注意到的几件事(我非常恼火，我不是一个熟练的程序员，我连续第二天都在尝试解决it): 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;

 }

---

计算最后在线的功能。每个用户在数据库中都有一个 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;
}

---

过去两天我一直在谷歌搜索，发现一些线程有类似的问题，但没有任何效果。这可能是由缓存或其他原因引起的吗？我在这类事情上不是很熟练，所以请在您的回答中详细说明。提前致谢!如果您还需要我提供任何其他信息，请回复我，我会照做。

Answer 1

setInterval() :

Repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. Returns an 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 中还有一个 known bug 可能导致这种闪烁的发生 - 或者，至少可以解释为什么它可能只在 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);    
});