clearTimeout не работает, как ожидается, когда кнопка снова нажимается

Question

У меня есть кнопка 2, и при нажатии любой из кнопок время показано ниже. Обе кнопки имеют отдельные выходы. Я пытаюсь использовать clearTimeout, но по какой-то причине он не очищает тайм-аут. Когда кнопка снова нажимается, она просто делает другой вызов ajax поверх уже существующего вызова ajax. Как получить clearTimeout для работы?

<input type = 'submit' value = 'show time' onclick = "showTime('test1.php', 'output1',0)"> 
<div id = 'output1'></div> 

<input type = 'submit' value = 'show time' onclick = "showTime('test1.php', 'output2',1)"> 
<div id = 'output2'></div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

<script type = "text/javascript"> 

var timeout = []; 
function showTime(gotoUrl,output,index) { 

if (timeout[index]) { 
clearTimeout(timeout[index]); 
} 

$.ajax({ 
type: "POST", 
url: gotoUrl, 
error: function(xhr,status,error){alert(error);}, 
success:function(data) { 
document.getElementById(output).innerHTML = data; 
showTimeX(gotoUrl, output); 
} //end of success:function(data) 
}); //end of $.ajax 

} //end of function showTime(gotoUrl, output) 

function showTimeX(gotoUrl,output,index) { 

$.ajax({ 
type: "POST", 
url: gotoUrl, 
error: function(xhr,status,error){alert(error);}, 
success:function(data) { 
document.getElementById(output).innerHTML = data; 
timeout[index] = setTimeout(function(){showTimeX(gotoUrl, output, index)}, 5000); 
} //end of success:function(data) 
}); //end of $.ajax 

} //end of function showTime(gotoUrl, output) 

</script> 

Answer 1

Ваша функция showTime(gotoUrl,output,index)showTimeX(gotoUrl, output) звонки на успех.

Для определения showTimeX(gotoUrl,output,index) требуется, чтобы индекс был последним, что не задано при вызове этой функции.

Может ли быть, что индекс не определен, и поэтому массив timeout не содержит переменных?