javascript - Countdown and bootstrap progress bar "bump" -

i'm working on little "web app" quiz. each slide has got amount of time answered (or 0 infinite time).

i find js here countdown:

        function countdown(options) {             var timer,                     instance = this,                     seconds = options.seconds || 10,                     updatestatus = options.onupdatestatus || function () {},                     counterend = options.oncounterend || function () {};              function decrementcounter() {                 updatestatus(seconds);                 if (seconds === 0) {                     counterend();                     instance.stop();                 }                 seconds--;             }              this.start = function () {                 clearinterval(timer);                 timer = 0;                 seconds = options.seconds;                 timer = setinterval(decrementcounter, 1000);             };              this.stop = function () {                 clearinterval(timer);             };         }  var mycounter = new countdown({                     seconds: timetogo, // number of seconds count down                     onupdatestatus: function (sec) {                         elapsed = timetogo - sec;                         $('.progress-bar').width(((elapsed / timetogo) * 100) + "%");                     }, // callback each second                     oncounterend: function () {                         //alert('counter ended!');                     } // final action                 });                  mycounter.start(); 

i made jsfiddle here :

https://jsfiddle.net/mitchum/kz2400cc/2/

but having trouble when go next slide, progress bar "bump". after looking "live source panel chrome" saw it's first "counter" not stopped , still runs.

do have tips or hint me solve bug ?

thanks

you must pay attention scope of variables. change "var mycounter" under document ready in "var mycounterfirst". check updated jsfiddle.

  var timetogofirst = $('.current').attr("data-time");   var mycounterfirst = new countdown({     seconds: timetogofirst, // number of seconds count down     onupdatestatus: function (sec) {       elapsed = timetogofirst - sec;       $('.progress-bar').width(((elapsed / timetogofirst) * 100) + "%");     }, // callback each second     oncounterend: function () {       alert('counter ended!');     } // final action   });   mycounterfirst.start();