如何使用单个javascript函数运行多个倒计时？

Question

我在页面加载页面上有多个倒计时。 我想用单个javascript函数完成所有工作。 我已经尝试了很多方法来使它工作但其中任何一个都适合我。

我在这里发现了一些类似的问题，但没有一个能帮助我。

我究竟做错了什么？ 我该怎么办？

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

Answer 1

使用.counter类迭代每个元素并运行setInterval计时器。 像这样的东西

$(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);
    });
});

这是一个演示http://jsfiddle.net/d3g840pe/2/

另外，我不太清楚你为什么使用rel属性。 而不是像这样使用data-*属性

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

Answer 2

紧凑编码的艺术......

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

Answer 3

您只需要多个枚举倒计时，这有效：

$(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);
    })        
});

演示 - > http://jsfiddle.net/ggx1vsyd/