How to refresh timer when click on link in javascript

Question

I have countdown time for 15 seconds. It refreshes when 1 second on it. I also need refresh timer when user clicks at link on my website. I use cookie to provide no refreshing of timer when user refreshes page. Now when I click at link my timer refreshes but my old timer continues to countdown. As a result I have two timers and every second I see values from different timers. For example: I have countdown timer for 15 second. I click at link when value on timer was 7 seconds, and I see something like this: 15, 6, 14, 5, 13, 4, 12, 3 etc. But I need normal sequnce such 15, 14, 13 etc. What should I do for it? Below is my code:

// calls when I click at link
function rate(auct_id){
$.ajax({
    type: 'POST',
    url: '/auth/rate',
    data: {'id': auct_id },
    success: function(data) {
        data = jQuery.parseJSON(data);
        if (data.message) {
            alert(data.message);
            if (data.message != 'rates_count') {
                windows.location = '/#openModal';
            }
        } else {
            var new_price = data.price;
            var new_login = data.login;
            new_price += '<span> руб.</span>';
            $('#price_' + auct_id).html(new_price);
            $('#login_' + auct_id).html(new_login);
            setTimer(auct_id, true);
        }
    }
});
}

function setTimer(id, update) {
     var countdown4;
     if(getCookie('countdown_' + id) && !update) countdown4 =    getCookie('countdown_' + id); 
     else countdown4 = 15;
     if (update) delete_cookie('countdown_' + id);
     do_cd4(id, countdown4, update);
 }

function getCookie(c_name) { 
var i, x, y, ARRcookies = document.cookie.split(";"); 
for (i = 0; i < ARRcookies.length; i++) { 
    x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("=")); 
    y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1); 
    x = x.replace(/^\s+|\s+$/g, ""); 
    if (x == c_name) { 
        return unescape(y); 
    } 
} 
} 

function setCookie(c_name, value, exdays) { 
   var exdate = new Date(); 
   exdate.setDate(exdate.getDate() + exdays); 
   var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" +         exdate.toUTCString()); 
   document.cookie = c_name + "=" + c_value; 
} 
var delete_cookie = function(name) {
    document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
 };

function convert_to_time(secs) { 
   secs = parseInt(secs); 
   hh = secs / 3600;   
   hh = parseInt(hh); 
   mmt = secs - (hh * 3600); 
   mm = mmt / 60; 
   mm = parseInt(mm); 
   ss = mmt - (mm * 60); 

   if (hh > 23) { 
      dd = hh / 24; 
      dd = parseInt(dd); 
      hh = hh - (dd * 24); 
   } else { 
      dd = 0; 
   } 

   if (ss < 10) { 
      ss = "0" + ss; 
   } 
   if (mm < 10) { 
      mm = "0" + mm; 
   } 
   if (hh < 10) { 
      hh = "0" + hh; 
   } 
   if (dd == 0) { 
      return (hh + ":" + mm + ":" + ss); 
   } 
   else { 
      if (dd > 1) { 
         return (dd + " day " + hh + ":" + mm + ":" + ss); 
      } else { 
         return (dd + " day " + hh + ":" + mm + ":" + ss); 
      } 
   } 
} 

// Our function that will do the actual countdown 
do_cd4 = function(id, countdown4, update) { 
   //console.log(countdown4);
   if (countdown4 < 1) {
       countdown4 = 15; 
       do_cd4(id, countdown4); 
   } else {
       $('#timer_' + id).html(convert_to_time(countdown4));
       setTimeout(function() {
          do_cd4(id, countdown4, update);
       }, 1000); 
   } 
   setCookie('countdown_' + id, countdown4, 3); 
   countdown4 = countdown4 - 1; 
 } 

Answer 1

The question has already been asked : Resetting a setTimeout

You need to keep a reference on your setTimeout, so you can clear it or restart it.