Question

我目前正在使用ajax轮询来定期从数据库中获取新数据并将其显示给用户。它工作正常，除了有时，提取的图像开始闪烁，然后闪烁突然停止。以下是获取数据的JavaScript：

function loadLog(){     
    $.ajax({
        url: "stream.php",
        cache: false,
        success: function(html){
$("#inner").html(html);         
        }
    });
}
setInterval (loadLog, 2500);

stream.php文件包含用于检查数据库中是否有新数据的基本sql命令。所以这些命令每2.5秒调用一次。如果帖子类型是图像，则它附带一个语句，例如：user_name在xseconds前发布了一个新图像。这些陈述根本不会闪烁，但图像确实如此。有没有办法阻止图像的闪烁？（有趣的是，如果数据库已经有图像，那么只有新发布的图像才会闪烁，而旧图像则没有。所以如果共有3个图像，两个旧图像和一个新图像，则新图像会闪烁，而其他人没有，尽管整个脚本正在被轮询，而不是特定的图像。）

Answer 1

我的猜测是，这是因为您每次都要替换#inner div的HTML，因此它会被重新渲染。

最优雅的方法是仅获取新项目（通过将时间戳参数传递给stream.php，即stream.php?timestamp=X，并且仅在时间戳中返回Feed中的项目，然后.prepend();内容到#inner div。

另一个建议是将该内容加载到一个新的隐藏div中，以便完全呈现，然后快速显示/隐藏旧内容。

Answer 2

尝试仅更新#inner的一部分。例如。如果图像未更改，则仅更新文本。如果图像已更改 - 请更换新图像。我认为在这种情况下你不会注意到闪烁效应。另请查看这些图像的http标头 - 可能有不正确的Expires，Last-Modified等标题，浏览器会多次加载相同的图像。

Answer 3

自从过去几天以来我一直在处理同样的问题，最后我跟着示例代码。

您需要的是将最后更新的time-stamp传递给新请求，并根据time-stamp找到传递time-stamp和当前time-stamp之间的记录。

<强>的index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>testing comet</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery.js"></script>
    </head>
    <body>

    <div id="content"></div>

<script type="text/javascript">

    var Comet = function (data_url)
    {
        this.timestamp = 0;
        this.url = data_url;  
        this.noerror = true;

        this.connect = function()
        {
            var self = this;

            $.ajax(
            {
                type : 'post',
                url : this.url,
                dataType : 'json', 
                data :
                {
                    'timestamp' : self.timestamp
                },
                success : function(response)
                {
                    self.timestamp = response.timestamp;
                    self.handleResponse(response);
                    self.noerror = true;          
                },
                complete : function(response)
                {
                    if (!self.noerror)
                    {
                        setTimeout(function(){ comet.connect(); }, 5000);           
                    }
                    else
                    {
                        self.connect(); 
                    }
                    self.noerror = false; 
                }
            });
        }

        this.disconnect = function() {}

        this.handleResponse = function(response)
        {
            $('#content').append('<div>' + response.msg + '</div>');
        }

        this.doRequest = function(request) {
            $.ajax(
            {
                type : 'post',
                url : "index.php",
                data :
                {
                    'msg' : request,
                    'submit' : "Send"
                }
            });
        }
    }

    var comet = new Comet('./backend.php');
    comet.connect();
</script>
</body>
</html>

<强> backend.php

<?php

    $filename  = dirname(__FILE__).'/data.txt';

    $msg = isset($_GET['msg']) ? $_GET['msg'] : '';
    if ($msg != '')
    {
        file_put_contents($filename,$msg);
        die();
    }

    $lastmodif    = isset($_GET['timestamp']) ? $_GET['timestamp'] : 0;
    $currentmodif = filemtime($filename);
    while ($currentmodif <= $lastmodif) // check if the data file has been modified
    {
        usleep(10000); // sleep 10ms to unload the CPU
        clearstatcache();
        $currentmodif = filemtime($filename);
    }

    $response = array();
    $response['msg']       = file_get_contents($filename);
    $response['timestamp'] = $currentmodif;
    echo json_encode($response);
    flush();
?>

您需要做的就是用txt file time modification查询替换mysql。

用mysql替换txt文件的示例代码

<?php
date_default_timezone_set('Asia/Kolkata');
$connection = mysql_connect('localhost','root','')or die(mysql_error());
$database   = mysql_select_db('stackoverflow')or die(mysql_error());

function get_date()
{
    $query = mysql_query("show table status from stackoverflow like 'last_update'")or die(mysql_error());

    $row = array();
    while($result = mysql_fetch_assoc($query))
    {
        $row[] = $result;
    }

    return strtotime($row[0]['Update_time']);
}


$lastmodif    = isset($_POST['timestamp']) ? $_POST['timestamp'] : 0;
$currentmodif = get_date();

while ($currentmodif <= $lastmodif)
{
    usleep(10000);
    clearstatcache();
    $currentmodif = get_date();
}

$query_db = mysql_query("SELECT UNIX_TIMESTAMP(last_update.created) AS DATE,last_update.* FROM last_update WHERE UNIX_TIMESTAMP(last_update.created) BETWEEN '".$lastmodif."' AND '".$currentmodif."'")or die(mysql_error());

$row_db = array();
$response = array();
while($result_db = mysql_fetch_assoc($query_db))
{
    $response['msg'][]       = $result_db['title'];
}

$response['timestamp'] = $currentmodif;
$response['lastmodif'] = $lastmodif;
echo json_encode($response);
flush();

希望这会对你有所帮助。

图像闪烁ajax民意调查

3 个答案: