javascript — предотвращает выполнение ajax callback settimeout более одного раза за клик
У меня есть кнопка, где при нажатии на нее будет показываться время, ждать 5 секунд, снова показывать время, а затем повторяться бесконечно. Однако, если вы нажмете кнопку еще раз, она снова вызовет функцию, поэтому теперь одновременно выполняется 2 вызова ajax. Поэтому вместо ожидания 5 секунд и отображения времени, поскольку одновременно выполняются 2 вызова ajax. Таким образом, в зависимости от того, когда вы нажали кнопку во второй раз, он может ждать 2 секунды, показывать время, ждать 3 секунды, показывать время, повторяется бесконечно.
Я думал о том, чтобы сделать кнопку неактивной после нажатия, но я не могу этого сделать, потому что планирую добавить к кнопке другие функции, кроме обратного вызова ajax setTimeout, и это не сработает, если я сделаю кнопку неактивной. Итак, мой вопрос, есть ли способ отменить первый вызов ajax перед вызовом второго вызова ajax, как-нибудь?
test1.php
<style>
#output {
width: 25%;
height: 25%;
border: 1px solid black;
}
</style>
<input type = 'submit' value = 'show time' onclick = "showTime('test2.php', 'output')">
<div id = 'output'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
function showTime(gotoUrl,output) {
$.ajax({
type: "POST",
url: gotoUrl,
error: function(xhr,status,error){alert(error);},
success:function(data) {
document.getElementById( output ).innerHTML = data;
setTimeout(function(){showTime(gotoUrl, output)}, 5000);
} //end of success:function(data)
}); //end of $.ajax
} //end of function ajaxFunc(gotoUrl, output)
</script>
test2.php
<?php
date_default_timezone_set('America/New_York');
$time = date('H:i:s');
echo $time;
?>
Решение
Это заняло больше, чем несколько правок, но я немного тороплюсь. Это должно быть по следующим направлениям:
var $element = $('selector');
//add event handler on click
$element.click(function () {
//set up indefinite ajax call
setInterval(function (){
$.ajax({
url: url,
data: somedata,
method: 'get'
}).done(function (data) {
//do something
});
}, 5000);
//now we can remove the click event from the button
$element.off('click');
});
//now we can add new ones using the reference
$element.on(//do whatever you want);
Другие решения
Если вы храните ответ от setTimeout() в переменной вы можете отменить его в следующий раз, когда кнопка нажимает с clearTimeout() метод.
clearTimeout(myShowTime);
myShowTime = setTimeout(function(){showTime(gotoUrl, output)}, 5000);
использовать JQuery .off() чтобы открепить один обработчик:
Вы можете использовать xhr.abort (); метод, чтобы прервать вызов ajax следующим образом:
var xhr;
function showTime(gotoUrl, output) {
if (xhr) {
xhr.abort();
}
xhr = $.ajax({
type: "POST",
url: gotoUrl,
error: function (xhr, status, error) {
alert(error);
},
success:function (data) {
document.getElementById( output ).innerHTML = data;
setTimeout(function() {
showTime(gotoUrl, output)
}, 5000);
}
});
}