Question

实施了多个倒数计时器

我需要为每个产品添加到购物车时设置计时器，所以我通过动态传递参数使用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>

提前致谢。

Answer 1

一开始没看错。然而我注意到它似乎从Minutes切换到Seconds。我在这里测试了它：http://jsfiddle.net/Twisty/joocqakz/

<强> 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);

<强> HTML

<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>

当我运行它时，我有三个计数器倒计时：

计时器1：Buzz Buzz

计时器2：1：35

计时器3：3：35

我只做了一些修改以坚持使用JQuery。我怀疑你的PHP会按计划运行，我只是稍微清理了一下。无法在JSFiddle中测试它。

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

1 个答案: