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은이 같은 것이있다. 같은 클래스와 다른 ID의

및 기능의 사용과

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

여러 요소는 다음과 같이이다 : 첫 번째에

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

는 잘 작동 클릭, 타이머가 카운트 다운. 하지만 같은 클래스로 두 번째 div를 클릭하면 첫 번째 카운터가 멈추고 두 번째 div는 이전 초부터 이동합니다.

그래서, js/jquery를 사용하여 같은 페이지에서 여러 번 카운트 다운을 할 수 있습니다. 두 요소 모두를 클릭하여 두 타이머가 잘 작동합니까?

데모 : http://jsfiddle.net/zKTkj/

Answer 1

• 당신은 var와 self를 선언하는 것을 잊었다. 결과적으로 self은 전역 변수가되었습니다. 두 번째 타이머를 만들 때이 전역 ("공유") 변수를 덮어 쓰는 중입니다. 그래서 두 타이머는 그때부터 동시에 두 번째 요소에 출력되어 글리치를 발생시킵니다.
• 아마도 clearInterval(interval)을 의미했을 것입니다.

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