在带有动态参数的javascript中具有多个倒计时计时器

我已经用这个实现了多重倒计时

一旦每个产品添加到购物车中，我需要为其设置计时器，因此我使用php动态传递参数来实现它

对于第一个产品，计时器工作正常，但当我向购物车添加一个产品时，两个产品的计时器都运行得很快

在firebug中，它抛出了一个错误TypeError:document.getElementById（…）为null 错误的数量将不断增加

Imp：产品将被添加到购物车中，而无需通过ajax调用刷新页面，并且在ajax调用函数中仅运行计时器

这是我的计时器函数代码，其中传递了动态参数

<script>
            var timerData = [];

            function secondPassed(row) {
                var seconds = timerData[row].remaining;
                var minutes = Math.round((seconds - 30) / 60);
                var remainingSeconds = seconds % 60;
            // var time=clearInterval(timerData[row].timerId);alert(time);
                if (remainingSeconds < 10) {
                    remainingSeconds = "0" + remainingSeconds;
                }

                document.getElementById('countdown' + row).innerHTML = minutes + ":" + remainingSeconds;
                if (seconds == 0) {
                    clearInterval(timerData[row].timerId);
                    document.getElementById('countdown' + row).innerHTML = "Buzz Buzz";
                            //$("#product_"+row).hide();
                            $("#add_"+row).show();
                            $("#1add_"+row).show();
                            $("#added_"+row).hide();
                            $("#block_"+row).hide();
                        $("#sale_"+row).show();
                             $("#1sale_"+row).show();
                            $.ajax({
                    type: "GET",
                    url: 'unblock.php',
                    data: { id:row },
                            success:function(data){ 
                            $("#cart-item").html(data);
                            $("#amount-top").html($("#total").val());
                            $("#item-total").html($("#carttotal").val());
                            }
                });
                } else {
                    seconds--;
                }
                timerData[row].remaining = seconds;
            }

            function timer(row, min) {
                    timerData[row] = {
                    remaining:min,
                    timerId: setInterval(function () { secondPassed(row); }, 1000)
                };
                    var sec=timerData[row].timerId;
            }
    <?php
    $itemid = array();
    foreach ($_SESSION["cart_item"] as $item) {

        $old = strtotime(date("m/d/Y h:i:s ", time()));
        $new = strtotime($item['time']);
        $time = $new - $old;
        ?>

                timer(<?php echo $item['id']; ?>,<?php echo $time; ?>);

    <?php } ?>

            </script>

var timerData=[]；
已传递函数（行）{
var seconds=timerData[row]。剩余；
var分钟=数学轮（（秒-30）/60）；
var剩余秒数=秒数%60；
//var time=clearInterval（timerData[row].timerId）；警报（time）；
如果（剩余秒数<10）{
剩余秒数=“0”+剩余秒数；
}
document.getElementById（'countdown'+行）。innerHTML=minutes+“：”+remainingSeconds；
如果（秒==0）{
clearInterval（timerData[row].timerId）；
document.getElementById（'countdown'+行）。innerHTML=“Buzz”；
//$（“#产品”+行）.hide（）；
$（“#添加#”+行）.show（）；
$（“#1添加”+行）.show（）；
$（“#添加了“+行）.hide（）；
$（“#块+行）.hide（）；
$（“#销售”+行）.show（）；
$（“#1销售”+行）.show（）；
$.ajax({
键入：“获取”，
url:'unblock.php'，
数据：{id:row}，
成功：函数（数据）{
$（“#购物车项目”）.html（数据）；
$（“#金额顶部”）.html（$（“#总额”）.val（））；
$（“#项目总数”）.html（$（“#项目总数”）.val（））；
}
});
}否则{
秒--；
}
timerData[行]。剩余时间=秒；
}
功能计时器（行，分钟）{
timerData[行]={
剩余：分钟，
timerId:setInterval（函数（）{secondPassed（行）；}，1000）
};
var sec=timerData[row].timerId；
}
计时器（，）；

---

提前谢谢。

一开始没有发现任何问题。但我注意到它似乎从几分钟变为几秒钟。我在这里测试过：

JQuery

var timerData = [];

function secondPassed(row) {
    var seconds = timerData[row].remaining;
    var minutes = Math.round((seconds - 30) / 60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds;
    }

    $("#countdown" + row).html(minutes + ":" + remainingSeconds);
    if (seconds === 0) {
        clearInterval(timerData[row].timerId);
        $("#countdown" + row).html("Buzz Buzz");
        $("#add_" + row).show();
        $("#1add_" + row).show();
        $("#added_" + row).hide();
        $("#block_" + row).hide();
        $("#sale_" + row).show();
        $("#1sale_" + row).show();
        $.ajax({
            type: "GET",
            url: 'unblock.php',
            data: {
                id: row
            },
            success: function (data) {
                $("#cart-item").html(data);
                $("#amount-top").html($("#total").val());
                $("#item-total").html($("#carttotal").val());
            }
        });
    } else {
        seconds--;
    }
    timerData[row].remaining = seconds;
}

function timer(row, sec) {
    timerData[row] = {
        remaining: sec,
        timerId: setInterval(function () {
            secondPassed(row);
        }, 1000)
    };
    var sec = timerData[row].timerId;
}
/*
<? php
foreach($_SESSION["cart_item"] as $item) {
    $old = strtotime(date("m/d/Y h:i:s ", time()));
    $new = strtotime($item['time']);
    $time = $new - $old;
    echo "timer({$item['id']}, $time);\r\n";
}
?>
*/
timer(1,120);
timer(2,240);
timer(3,360);

var timerData=[]；
已传递函数（行）{
var seconds=timerData[row]。剩余；
var分钟=数学轮（（秒-30）/60）；
var剩余秒数=秒数%60；
如果（剩余秒数<10）{
剩余秒数=“0”+剩余秒数；
}
$（“#倒计时”+行）.html（分钟+”：“+剩余秒）；
如果（秒===0）{
clearInterval（timerData[row].timerId）；
$（“#倒计时”+行）.html（“嗡嗡声”）；
$（“#添加#”+行）.show（）；
$（“#1添加”+行）.show（）；
$（“#添加了“+行）.hide（）；
$（“#块+行）.hide（）；
$（“#销售”+行）.show（）；
$（“#1销售”+行）.show（）；
$.ajax({
键入：“获取”，
url:'unblock.php'，
数据：{
id:世界其他地区
},
成功：功能（数据）{
$（“#购物车项目”）.html（数据）；
$（“#金额顶部”）.html（$（“#总额”）.val（））；
$（“#项目总数”）.html（$（“#项目总数”）.val（））；
}
});
}否则{
秒--；
}
timerData[行]。剩余时间=秒；
}
功能计时器（行，秒）{
timerData[行]={
剩余：sec，
timerId:setInterval（函数（）{
第二次通过（世界其他地区）；
}, 1000)
};
var sec=timerData[row].timerId；
}
/*
不知道为什么要混合使用原始JS和JQuery。其实没关系，只是好奇而已。当你运行
$time=$new-$old值是否有可能为0或小于0？您好Twisty，非常感谢您抽出时间$0之后，时间将以负方式运行。当它达到零时，我将其从购物车中移除，但即使计时器也会运行，并显示错误类型error:document.getElementById（…）在第行document.getElementById（'countdown'+行）上为空。innerHTML=minutes+“：”+remainingSeconds；
<p>Timer 1: <span id="countdown1" class="timer"></span></p>
<p>Timer 2: <span id="countdown2" class="timer"></span></p>
<p>Timer 3: <span id="countdown3" class="timer"></span></p>