javascript - 如何在单击并运行新功能时停止运行超时 jquery 功能？

Question

我试图每 5 秒用 ajax 调用更新一个 View 。我已经通过以下方式完成了。

function getData(a, b, c) {
    $.ajax({
        url     : 'url',
        success : function(data) {
            $("#result").html(data);
            setTimeout(getData, 5000, a, b, c);
        }
    })
}

$(document).ready(function() {
    getData(1, 2, 3);       
});

$('.btn').click(function(){
    getData(4,5,6);
});

但是，通过这种方式，运行的功能和点击的次数一样多。

我需要停止前一个并运行新的或更改运行函数的参数。

Answer 1

使用 Ajax abort() 函数在单击按钮时停止请求并开始一个新请求...

这里我有一个例子，说明中止是如何工作的……看看代码并试试这个……

<script>

var prev_request = false;
var xhr;
var myTimeoutReq;
//var myCondition = true,

function getData(a, b,c,myCondition ) 
{
    if(prev_request == true)
    {
        xhr.abort();
    }

    xhr =  $.ajax({
                url     : 'url',
                beforeSend: function( xhr ) {
                    prev_request = true;
                },
                success : function(data) {
                    $("#result").html(data);
                    if(myCondition == true)
                    {
                        myTimeoutReq = setTimeout(getData, 5000, a, b, c,true);
                    }
                    else
                    {
                        clearTimeout(myTimeoutReq);
                    }   
                },
                complete: function( xhr ) {
                    prev_request = false;
                }
            });
}

$(document).ready(function() {
    getData(1, 2, 3, true);       
});

$('.btn').click(function(){
    getData(4,5,6,false);
});
</script>