Cannot seem to ClearInterval on this function? Clock counts down by 2, then 3, then 4

I'm having an issue where I think interval functions are compounding which causes my counter to count down by 2, then 3, then 4, when it should be counting by 1's.

Here is my code:

s = 0;
function deconInterval(passedObj, startTime) {


if(!seconds) {  
    seconds = (startTime*60 - 1);
    s = seconds;
}

minVar = Math.floor(s/60); 
secVar = s % 60;

if(secVar < 10) { 
    zeros = '0';
} else {
    zeros = '';
}

s--;
    passedObj.html(minVar +':'+zeros+ '' +secVar);
}

$('button').click(function() {


    if($(this).html() == 'Reload') {
        alert('Resetting Cards');
        window.location.reload()
    }

    $(this).html('Reload');


    intval = setInterval(displayTime, 60000);
    $(function(){
        $('li.item').map(function(){
            var _this = $(this);
            setTimeout(function(){
                $('.timeleft').remove();            
                $('li.item').removeClass('highlighted');
                _this.addClass('highlighted');

        timeval = _this.next().attr('data-time') - (_this.attr('data-time'))

        _this.prepend('<div class="timeleft">'+(timeval)+':00</div>');

        seconds = ""; //reset seconds
  开发者_如何学运维      timetabInterval = setInterval(function() { deconInterval(_this.children('.timeleft'), timeval); }, 1000);


            },(Number(_this.attr('data-time'))*60000));
        });
    });
});

clearInterval is the answer to your question.

You don't need to execute $(function(){...}) inside a click handler, since if you've set the click handler, the dom is ready.

I think you shouldn't use global variables for intval, timeval and timetabInterval otherwise you end up attaching more events to the same variable and mess everything up (in your case i think you attach a lot of setInterval to timetabInterval and so you end upx counting by 2,3 or 4)