使用jQuery在同一页面上的多个倒计时

Question

我在使用jquery / javascript倒数计时时遇到了一些问题，希望您能为我提供帮助。

因此，我有计时器功能，它具有一个参数，称为选择器（jquery选择器）。

function timer(selector) {
    self = $(selector);     
    var sec = parseInt(self.find('span.timeout').text());

    var interval = setInterval(function() {
    sec--;
    if (sec >= 0) {
        self.find('span.timeout').text(sec);
    } else {
        setInterval(interval);
    }
    }, 1000);

}

在，HTML我有这样的事情。

<div class="element" id="el1"><span class="timeout">10</span></div>
<div class="element" id="el2"><span class="timeout">10</span></div>

具有相同类和不同ID的多个元素

该函数的用法如下：

$("body").on('click', '.element', function() {
timer(this);
});

第一次点击就可以了，计时器倒计时。 但是，当我单击同一班级的第二个div时，第一个计数器停止，第二个从前一个秒开始。

因此，如何使用js / jquery在同一页面上进行多次倒计时，所以我可以单击两个元素，两个计时器都能正常工作？

演示： http : //jsfiddle.net/zKTkj/

Answer 1

• 您忘了用var声明self 。 结果， self成为全局变量。 创建第二个计时器时，您正在覆盖此全局（“共享”）变量。 因此，这两个计时器从那时起就同时进入第二个元素，从而引起故障。
• 您可能是指clearInterval(interval) 。

http://jsfiddle.net/zKTkj/1/