Не работает clearInterval

[Hur_ley]

Делаю таймер, который издает звуоковой сигнал каждые n секунд.
Функция okras отрисовывает полоску в зависимости от времени, которое проходит, до звукового сигнала.
Вызываю ее один раз перед timerPing = setInterval для отрисовки до первого сигнала, остальные разы вызываю уже внутри setInterval. По кнопке вызываю функцию остановки таймера timerStop(). Если запустить таймер, потом нажать на кнопку перед первым звуковым сигналом, то таймер выключится, и отрисовка полосы так же остановится. Если нажать на кнопку, после первого сигнала, то есть, когда функция отрисовки будет выполняться внутри setInterval, то выключится только таймер, а полоса все равно продолжает рисоваться, почему так?

...

function timerfunc(){

	...
	
	function okras(){
		timerLine = setInterval(function() 
		{
			var timePassed = Date.now() - start;
			if (timePassed >= finalTime*1000) 
			{
				clearInterval(timerLine);
			}
			draw(timePassed);
		}, 20);
	}

	...
	
	okras();
	timerPing = setInterval(function() 
	{  
		start = Date.now();
	okras();
		ping.play();  
	}, finalTime*1000);
	
}

function timerStop(){
	clearInterval(timerPing);
	clearInterval(timerLine);
	document.getElementById('buttonStop').innerHTML='<a id=timerButton onClick=timerfunc()>ЗАПУСК</a>';
}

[ksa]

почему так?

Ты все пишешь про какой-то один setInterval()... А в твоих огрызках их уже два...

[Dilettante_Pro]

Hur_ley,

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

Потому что clearInterval останавливает соответствующий таймер, а запущенную функцию draw(timePassed) не останавливает.
В этом примере подождите немного, чтобы начали появляться цифры, и нажмите Стоп

<button id="stop">Стоп</button>
<div id="cont"></div>

<script>
var i = 0;
var interval = setInterval(function() {
       startCount(++i);
},2000);
function startCount(indx) {
   var divCount = document.createElement('div');
   divCount.id = "count" + indx.toString();
   cont.appendChild(divCount);
   var j = 0;
   var start = setInterval(function() {divCount.innerText = ++j},1000);
}
document.getElementById("stop").onclick = function() {
 
  clearInterval(interval);
}
</script>