再次单击按钮时，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) 定义需要索引作为最后一个参数，调用该函数时未指定索引。

会不会是索引未定义，所以超时数组不包含任何变量？

再次单击按钮时，clearTimeout 无法按预期工作

clearTimeout not working as expected when button is clicked again

javascript

php

ajax

jquery

cleartimeout