Yii:如何设置活动计时器/经过时间

时间:2013-10-20 10:04:08

标签: php ajax yii

我的控制器中有这个功能。

public function time_elapsed_string($ptime)
{
    $etime = time() - $ptime;

    if ($etime < 1)
    {
        return '0 seconds';
    }

    $a = array( 12 * 30 * 24 * 60 * 60  =>  'year',
                30 * 24 * 60 * 60       =>  'month',
                24 * 60 * 60            =>  'day',
                60 * 60                 =>  'hour',
                60                      =>  'minute',
                1                       =>  'second'
                );

    foreach ($a as $secs => $str)
    {
        $d = $etime / $secs;
        if ($d >= 1)
        {
            $r = round($d);
            return $r . ' ' . $str . ($r > 1 ? 's' : '') . ' ago';
        }
    }
}

并在我的视图中调用它:

$this->time_elapsed_string(strtotime($model->created_on))

输出很好,但是如何在不刷新页面的情况下更新某个视图,间隔为5到10秒?

1 个答案:

答案 0 :(得分:1)

这是一种可以实现类似计时器的方法,使用jQuery调用jQuery,每隔5秒更新一次值。

time_elapsed_string()方法放入控制器中的操作中,而不是返回该操作的输出,回显JSON::encode

public function actionAjaxElapsedTime()
{
    $ptime = $_POST['ptime'];
    $etime = time() - $ptime;
    if ($etime < 1)
    {
        $data = '0 seconds';
        echo CJSON::encode($data);
        Yii::app()->end();
    }
    ....
    foreach ($a as $secs => $str)
    {
        $d = $etime / $secs;
        if ($d >= 1)
        {
            $r = round($d);
            $data = $r . ' ' . $str . ($r > 1 ? 's' : '') . ' ago';
            echo CJSON::encode($data);
            Yii::app()->end();
        }
    }
}

然后在您的视图中,您可以在setTimeout()参数中使用js方法completed进行ajax调用,如下所示:

(function update() {
    $.ajax({
        type: "POST",
        url: "<?php echo Yii::app()->createUrl('yourController/ajaxElapsedTime'); ?>", 
        data: {ptime : <?php echo strtotime($model->created_on); ?>},
        success: function(data) {
            $('.result').html(data);
        },
        complete: function() {
            setTimeout(update, 5000);
        }
    });
})();

在这种情况下,ajax调用会将POST中的数据发送到您的操作,并将结果附加到类result的html元素中。完成此过程后,将调用setTimeout以在5000毫秒后再次启动整个过程。

此代码未经过测试,但它应该让您了解如何到达目的地。