Таймер обратного отсчета не останавливается

Question

Если ответ задан до 10 секунд, мне нужна функция останова. Я пробовал некоторые идеи, но не могу найти решение

Вот updated jsFiddle и мой код. Может ли кто-нибудь помочь, пожалуйста?

HTML

<canvas id="timer" width="48" height="48"></canvas> 
<span id="num"></span> 

<br /><br /> 
<a href="javascript:istop();">stop</a> 

JAVASCRIPT

function sCounter(){ 
    canvas = document.getElementById('timer'); 
    num = document.getElementById('num'); 
    ctx = canvas.getContext('2d'); 
    fps= 40; 

    var total = fps*10; //*second 
    for(var i=total;i>=0;i--) { 
     var delayed = (function(){ 
      var step = 1-i/total; 
      var left = Math.ceil(i/fps); 
      return function() { 
       num.innerHTML=left; 
       draw_next(step); 

       if(left===0){ //if 0 
        //etc... 
       } 
      }; 
     })(); 
     var timer = setTimeout(delayed,-1000/fps*(i-total)); 
    } 
} 

function draw_next(step) { 
    ctx.clearRect(0,0,48,48); 
    ctx.beginPath(); 
    ctx.arc(24,24,20,Math.PI * (-0.5 + 0),Math.PI * (-0.5 + step*2),false); 
    ctx.lineWidth = 8; 
    ctx.strokeStyle = "#dedede"; 
    ctx.stroke(); 
} 

function istop(e) { 
    e.preventDefault(); 
    var timer = null; 
    clearTimeout(timer); 
    return false; 
} 

sCounter(); 

Answer 1

Вы должны поставить вар таймера на общий объем, кажется также, что цикл активирует таймеры без предыдущего имеет из-за этого вы не можете их очистить, см. статью: http://jsfiddle.net/HQJkz/

var timer = null 

    function sCounter() { 
    canvas = document.getElementById('timer'); 
    num = document.getElementById('num'); 
    ctx = canvas.getContext('2d'); 
    fps = 40; 

    var total = fps * 10; //*second 

    var render = function (left, step, i) { 
     num.innerHTML = left; 
     draw_next(step); 
     if (left) 
     if (left === 0) { //if 0 
      //etc... 
     } else { 
      delayed(i - 1); 
     } 
    }; 

    var delayed = function (i) { 
     var step = 1 - i/total; 
     var left = Math.ceil(i/fps); 
     var current = function() { 
      console.log(left, step); 
      render(left, step, i); 
     }; 
     timer = setTimeout(current, -1000/fps * (i - total)); 
    } 

    delayed(total - 1); 
} 

И кажется, что вы пытаетесь очистить таймер после потери его значения. Мне пришлось изменить область istop на окно, потому что скрипка не нашла его. Это должно сделать трюк:

window.istop = function() { 
    clearTimeout(timer); 
    timer = null; 
    return false; 
}