How to run multiple countdowns with single javascript function?

Question

I have multiple countdowns on my page on page load. I want to make it all work with single javascript function. I have tried many ways to make it work but any of them worked for me.

I have found some similar questions here but none of them helped me.

What am I doing wrong? What should I do?

http://jsfiddle.net/d3g840pe/1/

HTML:

<table>
    <tr id="id1">
        <td>img</td>
        <td>#</td>
        <td>type</td>
        <td>status</td>
        <td>
            <span class="counter" rel='120'></span>
        </td>
    </tr>
    <tr id="id2">
        <td>img</td>
        <td>#</td>
        <td>type</td>
        <td>status</td>
        <td>
            <span class="counter" rel='200'></span>
        </td>
    </tr>
    <tr id="id3">
        <td>img</td>
        <td>#</td>
        <td>type</td>
        <td>status</td>
        <td>
            <span class="counter" rel='50'></span>
        </td>
    </tr>
</table>

JS:

$(function() {
    $tr = $('.counter').closest('tr');
    $trId = $tr.attr('id');
    $span = $('#' + $trId).find('.counter');
    $counter = $span.attr('rel');
    setInterval(function() {
        $counter--;
        $span.attr('rel', $counter);
        if ($counter >= 0) {
            $span.html($counter);
        }
        // Display '$counter' wherever you want to display it.
        if ($counter === 0) {
            //return true;
            console.log('finished');
            clearInterval($counter);
        }
    }, 1000);
});

Dhiraj · Accepted Answer · 2015-07-14 01:41:22Z

3

Iterate over each element with .counter class and run a setInterval timer. Something like this

$(function () {
    $('.counter').each(function () {
        var duration = +$(this).attr('rel'), // <--- + is same as parseInt()
            $span = $(this);
        var counter = setInterval(function () {
            duration--;
            $span.attr('rel', duration);
            $span.html(duration);
            if (duration <= 0) {
                console.log('finished');
                clearInterval(counter);
            }
        }, 1000);
    });
});

Here is a demo http://jsfiddle.net/d3g840pe/2/

Also, I am not quite sure why you used rel attribute. Instead of that use data-* attribute like this

<span class="counter" data-duration=200>

edited Jul 14, 2015 at 1:41

answered Jul 14, 2015 at 1:39

Dhiraj

33.7k10 gold badges65 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Schien · Accepted Answer · 2015-07-14 01:39:29Z

2

The art of compact coding...

<button id="b1">100</button>
<button id="b2">10</button>
<button id="b3">5</button>
<script>
function countdown(nsec,d){
  if (d.nsec==null) d.nsec=nsec;
  d.counter=setInterval(function(){
    d.nsec--;
    if (d.nsec<0) {
      clearInterval(d.nsec);
      return;
    }
    d.innerHTML=d.nsec;
  },1000);
}

countdown(document.getElementById('b1'),100);
countdown(document.getElementById('b2'),10);
countdown(document.getElementById('b3'),5);
</script>

edited Jul 14, 2015 at 1:39

answered Jul 14, 2015 at 1:34

Schien

3,9231 gold badge20 silver badges29 bronze badges

4 Comments

aiternal Over a year ago

I need it on page load if possible, without a click. Is there a way?

aiternal Over a year ago

Thanks for contribution Schien.

Schien Over a year ago

You're welcome. I always try to provide a plain JavaScript solution when possible. $('.classname').each is inherently slow even though it doesn't seem it.

aiternal Over a year ago

As a newbie, Jquery always seems smoother to me. And also number of occurences are not certain, so I need to run another loop for calling functions with this method.

davidkonrad · Accepted Answer · 2015-07-14 01:53:35Z

2

You just need multiple enumerated countdowns, this works :

$(function () {
    $(".counter").each(function() {
        var $this = $(this),
            counter = $this.attr('rel');
        var countDown = setInterval(function() {
               counter--;
               $this.text(counter); 
               if (counter == 0) { 
                   clearInterval(countDown);
               }    
            }, 1000);
    })        
});

demo -> http://jsfiddle.net/ggx1vsyd/

answered Jul 14, 2015 at 1:53

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Collectives™ on Stack Overflow

How to run multiple countdowns with single javascript function?

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related