javascript - 无法根据 div 中的当前值更新 div

Question

我有一个 php 页面，显示 Web 界面中的服务器日志。这很简单。基本上，在 setinterval() 中有一个 ajax 调用，它会命中后端 php 文件，该文件将读取日志并回显它。相关代码为:

setInterval(function()
{
    $.get("log.php",{logId: $('#logId').val()}, function(data)
    {
        $("#logDetails").html(data);

        //scroll to the bottom when updated...
        $("#logDetails").stop().animate({scrollTop: $("#logDetails")[0].scrollHeight}, 800);
    });
}, 2000);

正如您所看到的，这只是用服务器中日志文件的内容更新一个名为 logDetails 的 id 的 div。

div 有一个 style="overflow:scroll" 和行 $("#logDetails").stop().animate.. 是滚动到添加新内容时 div 的底部。所有这些都非常有效。

如果用户向上滚动 div 并正在检查日志，并且出现新内容，则 div 会向下滚动。那也好。问题是服务器日志可能有很多小时不活动。在此期间，当用户向上滚动时，由于 setinterval 仍在工作，因此即使新内容不可用，他也会向下滚动。这可能会成为一个真正的麻烦。

我想以尽可能最小的方式处理这个问题，我认为这样做可能就足够了:

$.get("log.php",{logId: $('#logId').val()}, function(data)
{
    //new condition to check id new content has come
    if($('#logDetails').val() != data)
    {
        //update div and scroll to the bottom..
    }
    ...

但是这不起作用。我知道其他方法，例如检查服务器端的日志修改时间等，但由于其他原因我无法修改任何这些文件。

所以我的问题是 - 为什么这不起作用？我怎样才能在接口(interface)文件本身内部做到这一点，而不是诉诸其他手段？

推送日志的PHP代码是:

$contents = "";
$handle   = @fopen($logFile, 'r');
if($handle) 
{
    while(($line = fgets($handle)) !== false) 
    {
        //highlight errors
        $txt = "Execution stopped because of error";
        if(strstr($line,$txt))
        {
            $line = "<span style='color:red'>".$line."</span>";
        }

        $contents .= $line;
    }
}
@fclose($handle);
echo nl2br($contents);

Answer 1

由于您提到来自日志的数据将是动态的，因此很难准确找出问题所在。不过你可以通过以下方式弄清楚:

• 执行 $('#logDetails').val() 和 data 的 console.log
• 然后使用 kDiff 等比较软件来找出它们的差异。

一旦发现差异，就可以想办法解决。

希望有帮助!