Question

I want to make a countdown timer, that can be used on several places in the same page – so I think it should be a function in some way.

I really want it to be made with jQuery, but I cant quite make it happen with my code. I have e.g. 10 products in a page, that I need to make a countdown timer – when the timer is at 0 I need it to hide the product.

My code is:

$(document).ready(function(){

    $(".product").each(function(){

        $(function(){
            var t1 = new Date()
            var t2 = new Date()
            var dif = t1.getTime() - t2.getTime()

            var Seconds_from_T1_to_T2 = dif / 1000;
            var Seconds_Between_Dates = Math.abs(Seconds_from_T1_to_T2);

            var count = Seconds_Between_dates;
            var elm = $(this).attr('id');
            alert(elm);
            countdown = setInterval(function(){
                $(elm + " .time_left").html(count + " seconds remaining!");
                if (count == 0) {
                    $(this).css('display','none');
                }
                count--;
            }, 1000);
        });
    });
});

EDIT 1:

$(document).ready(function(){

    $(".product").each(function(){
            var elm = $(this).attr('id');           

        $(function(){
            var t1 = new Date()
            var t2 = new Date()
            var dif = t1.getTime() - t2.getTime()

            var Seconds_from_T1_to_T2 = dif / 1000;
            var Seconds_Between_Dates = Math.abs(Seconds_from_T1_to_T2);

            var count = Seconds_Between_dates;

            alert(elm);
            countdown = setInterval(function(){
                $(elm + " .time_left").html(count + " seconds remaining!");
                if (count == 0) {
                    $(this).css('display','none');
                }
                count--;
            }, 1000);
        });
    });
});

Do you have any solutions to this?

Answer 1

I’d probably use a single interval function that checks all the products. Something like this:

$(function() {

    /* set when a product should expire.
       hardcoded to 5 seconds from now for demonstration
       but this could be different for each product. */
    $('.product').each(function() {
        $(this).data('expires', (new Date()).getTime() + 5000);
    });

    var countdown_id = setInterval(function() {
        var now = (new Date()).getTime();
        $('.product').each(function() {
            var expires = $(this).data('expires');
            if (expires) {
                var seconds_remaining = Math.round((expires-now)/1000);
                if (seconds_remaining > 0) {
                    $('.time-left', this).text(seconds_remaining);
                }
                else {
                    $(this).hide();
                }
            }
        });
    }, 1000);
});

You could also cancel the interval function when there is nothing left to expire.