Having multiple countdown timer in javascript with dynamic arguments

Question

I have implemented multiple countdown timer by using this jsfiddle link

I need to set timer for each products once it added to the cart, so I implemented it by using php by passing the arguments dynamically.

For the first product the timer works fine but as I add one more product to the cart the timer runs fast for both the products.

In firebug it is throwing an error TypeError: document.getElementById(...) is null and the count of error will increase continuously.

Imp: Products will be added to the cart without refreshing the page by ajax call and in ajax call function only running the timer.

Here is my timer function code with dynamic arguments passed.

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

Thanks in advance.

Not sure why you're mixing raw JS and JQuery. Doesn't matter really, just curious. — Twisty
– Twisty, Commented Oct 8, 2015 at 7:54
When you run $time = $new - $old; is there ever a chance the value will be 0 or less than 0? — Twisty
– Twisty, Commented Oct 8, 2015 at 8:09
Hello Twisty, thank you very much for your time. $time will run in negative way after 0. As it reaches zero I remove it from the cart, But even the timer will still run and showing me the error TypeError: document.getElementById(...) is null on line document.getElementById('countdown' + row).innerHTML = minutes + ":" + remainingSeconds; — Sudhir Koimattur
– Sudhir Koimattur, Commented Oct 8, 2015 at 9:06

Twisty · Accepted Answer · 2015-10-08 08:21:52Z

Didn't see anything wrong at first. Yet I noticed it seemed to switch from Minutes to Seconds. I tested it here: 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>

When I run it, I am getting three counters counting down:

Timer 1: Buzz Buzz

Timer 2: 1:35

Timer 3: 3:35

I only made a few changes to stick to JQuery. I suspect your PHP would work as planned, I just cleaned it up a bit. Could not test that in JSFiddle.

Collectives™ on Stack Overflow

Having multiple countdown timer in javascript with dynamic arguments

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related