остановка Javascript таймер обратного отсчета с OnClick события

Question

мне нужно помощью, я сделать яваскрипт функции обратного отсчета таймера с индикатором хода, вот код

function progress(timeleft, timetotal, $element) { 
    var progressBarWidth = timeleft * $element.width()/timetotal; 
    $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear').html(''); 
     $('#time_wrap').html('<span id="timer">'+timeleft+'</span>'); 
    if(timeleft > 0) { 
     setTimeout(function() { 
      progress(timeleft - 1, timetotal, $element); 
     }, 1000); 
    }else{ 
      setTimeout(function() { 
      submitdata(); 
     }, 1000); 
     } 
    }; 

мне нужно, чтобы остановить таймер с OnClick события, например: <input type="button" onclick="stoptimer();">

как остановить таймер с функцией stoptimer()?

Answer 1

То, что вы ищете, это clearTimeout.

Вы можете изменить свой код, чтобы быть похожим:

var timer = null; 

function progress(timeleft, timetotal, $element) { 
    var progressBarWidth = timeleft * $element.width()/timetotal; 
    $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear').html(''); 
     $('#time_wrap').html('<span id="timer">'+timeleft+'</span>'); 
    if(timeleft > 0) { 
     timer = setTimeout(function() { 
      progress(timeleft - 1, timetotal, $element); 
     }, 1000); 
    } else{ 
     timer = setTimeout(function() { 
      submitdata(); 
     }, 1000); 
    } 

    // You can use this to bind event only after the timer is set. 
    // $('#stop-btn').on('click', function() { 
    // clearTimeout(timer); 
    // }); 
}; 

function stoptimer() { 
    clearTimeout(timer); 
}