0

私は現在 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 ago. ステートメントはまったくちらつきませんが、画像はちらつきます。画像のちらつきを止める方法はありますか？(興味深いことに、データベースに既に画像がある場合、新しく投稿された画像だけがちらつきますが、古い画像にはちらつきはありません。したがって、古い画像が 2 つと新しい画像が 1 つ、合計 3 つの画像がある場合、新しい画像はちらつきますが、新しい画像はちらつきます。特定の画像ではなく、スクリプト全体がポーリングされているという事実にもかかわらず、他のものはそうではありません。)

4

3 に答える 3

0

私の推測では、これは#innerdivのHTMLを毎回置き換えているため、再レンダリングされているためだと思います。

最も洗練されたアプローチは、新しいアイテムのみをフェッチすることです（つまり、タイムスタンプ引数をstream.phpに渡すことにより、タイムstream.php?timestamp=Xスタンプ以降のフィード内のアイテムのみを返し、次に.prepend();そのコンテンツを#innerdivに返します。

もう1つの提案は、そのコンテンツを新しい非表示のdivにロードして完全にレンダリングしてから、古いコンテンツをすばやく表示/非表示にすることです。

于 2013-02-21T11:30:16.983 に答える
0

私はここ数日から同じ問題に取り組んでおり、次のサンプルコードになりました。

必要なのは、最後に更新されtime-stampたものを新しいリクエストに渡し、それに従って、渡されたものと現在のもののtime-stamp間のレコードを検索することです。time-stamptime-stamp

インデックス.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クエリに置き換えることだけです。

txtファイルをmysqlに置き換えるサンプルコード

<?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();

これがあなたを助けることを願っています。

于 2013-02-21T11:40:10.697 に答える
0

#inner の一部のみを更新してみてください。たとえば、画像が変更されていない場合は、テキストのみを更新します。イメージが変更された場合 - 新しいイメージに置き換えます。この場合、ちらつき効果に気付かないと思います。これらの画像の http ヘッダーも確認してください。Expires、Last-Modified などのヘッダーが間違っている可能性があり、ブラウザは同じ画像を数回読み込みます。

于 2013-02-21T11:31:56.560 に答える