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

Question

我的页面在页面加载时有多个倒计时。我想让它全部使用单个 javascript 函数。我尝试了很多方法让它发挥作用，但其中任何一种都对我有用。

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

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

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

紧凑编码的艺术...

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

使用 .counter class 和 运行 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 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/