Question

好的，所以我设法让一切都在运行 - 最后一件事。基本上，一个jQuery + ajax函数为日期增加了15秒，并为MySQL添加了一个新行。我需要添加一个新行，以便我可以获得历史记录的最后5行：

<?php 
include("inc/dblink.inc");
$itemid = intval($_POST['i']);
$bid = intval($_POST['b']);
$row = mysql_fetch_array(mysql_query("SELECT * FROM test WHERE itemid=$itemid ORDER BY bidid DESC LIMIT 0,1"));
$date = $row['date'];
$newdate = strtotime($date);
$newerdate = ($newdate + 15);
$newestdate = date("Y-m-d H:i:s", $newerdate);
mysql_query("INSERT INTO test (date,bid,itemid) VALUES ('$newestdate','$bid','$itemid')");
?>

第二个脚本每秒刷新一次并显示表中的数据。

<script type="text/javascript">
var auto_refresh = setInterval(
function()
{
$('#timeleft').load('gettime.php', { i: <?=$itemid;?> }).show();
$.ajax({
    type: "POST",
    url: "gettime.php",
    data: ({i : <?=$itemid;?>}),
    success: function(data){
        var s = data;
        var t = s.split(/[- :]/);
        var d = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
        $('#defaultCountdown').countdown({until: d,compact: true, 
        description: ''});
    }
});
}, 1000);
</script>

这是gettime.php

<?php 
include("inc/dblink.inc");
$itemid = intval($_POST['i']);
$row = mysql_fetch_array(mysql_query("SELECT * FROM test WHERE itemid='$itemid' ORDER BY bidid DESC LIMIT 0,1"));
$date = $row['date'];
echo $date;
?>

我还使用了http://keith-wood.name/js/jquery.countdown.js

中的Keith Wood的jQuery倒计时脚本

问题：

这一行$('#timeleft').load('gettime.php', { i: <?=$itemid;?> }).show();很好。添加了15秒的新时间显示没有问题。这是我遇到问题的倒计时。它不会给计时器增加15秒，但如果我刷新整个页面，我可以看到增加了15秒。

我做错了什么？相当新的jQuery。谢谢！

您可以在行动here中看到它。

Answer 1

这里有几个主要问题，还有一些小问题。

日期格式

使用unix时间戳而不是格式化日期要简单得多。 PHP和javascript在这方面非常相似。两者都基于相同的“纪元”，即1970年1月1日00:00.UNIX / PHP在该日期的几秒钟内工作，javascript在毫秒内工作。因此，可以使用Date初始化javascript new Date(unix_timestamp * 1000);对象，而无需进行棘手的字符串处理。

倒计时

倒计时设计为以1秒的分辨率自由运行至零（然后触发可选的回调函数）。如果轮询间隔为1秒，则无需每次重新初始化倒数计时器 - 仅在返回的时间戳已更改时。

效率

使用setinterval，客户端处理器可以在setinterval函数之外创建尽可能多的对象/字符串。这特别适用于带有（静态）选择器的jQuery语句，因为它们会导致（可能很大的）DOM被搜索。

把所有这些放在一起，我的javascript看起来像这样：

$(function(){
    var $$ = {//cached jQuery objects
        timeleft: $('#timeleft'),
        defaultCountdown: $('#defaultCountdown')
    };
    var map_1 = {//namespace for setInterval and countdown data
        url: 'gettime.php',
        lastTimeStamp: 0,
        countdown_settings: {until:null, compact:true, description:''},
        itemid: <?=$itemid;?>
    };
    var auto_refresh = setInterval(function() {
        $$.timeleft.load(map_1.url, {i:map_1.itemid}).show();
        $.ajax({
            type: "POST",
            url: map_1.url,
            data: {i:map_1.itemid},
            success: function(unixTimeStamp) {
                unixTimeStamp = parseInt(unixTimeStamp);
                if(unixTimeStamp !== map_1.lastTimeStamp) {
                    map_1.countdown_settings.until = new Date(parseInt(unixTimeStamp) * 1000);
                    $$.defaultCountdown.countdown(map_1.countdown_settings);
                    map_1.lastTimeStamp = unixTimeStamp;
                }
            }
        });
    }, 1000);
});

当然，要使这项工作，需要修改PHP语句echo $date;以回显日期的unix时间戳表示。对于存储在数据库中的日期格式的知识，这应该是相当微不足道的。

编辑：Unix时代是1970年1月1日00:00（午夜），而不是12:00（中午），doh！ Javascript是相同的，因此对代码没有负面影响。

Answer 2

您的日期对象，即'd'仅初始化一次，即第一次加载页面。每次运行倒计时功能时，都可以找到重新初始化的方法。

Answer 3

我认为这行中的php脚本变量只生成一次，这就是原因，它只能运行一次（即每次页面刷新）。

 $('#timeleft').load('gettime.php', { i: <?=$itemid;?> }).show();

更新您的JS成功代码以更新变量，因此每次调用都会更新页面。

Answer 4

在ajax中添加：

$('#defaultCountdown').countdown('option', {
    format: 'DHMS', until : d
});

适合我。

如何每秒使用jQuery进行ajax调用？

4 个答案:

日期格式

倒计时

效率