Question

我有一个按钮，当你点击它时，它会显示时间，等待5秒，再次显示时间，然后无限期重复。但是，如果再次单击该按钮，它将再次调用该函数，因此现在有两个ajax调用同时运行。因此，不是等待5秒并显示时间，因为有两个ajax调用同时运行。因此，根据您第二次点击按钮的时间，它可能会等待2秒，显示时间，等待3秒，显示时间，无限期重复。</ p>

我想在点击按钮后使按钮不可点击，但我不能这样做，因为我打算在按钮之外添加除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;

?>

Answer 1

这需要进行多次编辑，但我很匆忙。它应该是这样的：

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);

Answer 2

如果您将setTimeout()的回复存储在变量中，则可以在下次使用clearTimeout()方法点击该按钮时将其取消。

clearTimeout(myShowTime);
myShowTime = setTimeout(function(){showTime(gotoUrl, output)}, 5000);

Answer 3

使用jQuery .off()取消绑定一个处理程序：

http://api.jquery.com/off/

Answer 4

你可以使用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);
        }
    });
}

防止ajax回调settimeout每次执行多次执行

4 个答案: