如何使用單個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/