如何在点击并运行新功能时停止运行超时jquery功能?

时间:2016-04-28 04:51:17

标签: javascript jquery ajax settimeout

我正在尝试每5秒钟使用ajax调用更新一个视图。我是按照以下方式完成的。

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

但是,通过这种方式,许多功能都会运行尽可能多的点击。

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

3 个答案:

答案 0 :(得分:2)

您需要使用clearTimeout来完成之前的超时,因为您需要首先分配setTimeout返回的对象。声明一个全局对象,将超时对象分配给可以通过其他函数评估的对象。

分配超时对象

someGlobalTimeoutObject = setTimeout(getData, 5000, a, b, c);

清除超时对象

clearTimeout(someGlobalTimeoutObject);

答案 1 :(得分:2)

使用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>

答案 2 :(得分:1)

&#13;
&#13;
function getData(a, b, c) {
    if(detData.ajax) {
        detData.ajax.abort();
        clearTimeout(getData);
    }
    detData.ajax = $.ajax({
        url     : 'url',
        success : function(data) {
            $("#result").html(data);
            setTimeout(getData, 5000, a, b, c);
        }
    });
}
&#13;
&#13;
&#13;