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

【问题标题】：How to stop running timeout jquery function on click and run new function?如何在单击并运行新功能时停止运行超时 jquery 功能？
【发布时间】：2016-04-28 04:51:17
【问题描述】：

我正在尝试每 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);
});

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

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

【问题讨论】：

使用clearTimeout() 停止执行您的 setTimeOut 函数..
我已经尝试过了，但无法捕捉到正在运行的事件。清除超时（？？？）
您可以在 ajax 调用中设置更多参数。 async : false。它会一一调用。

标签： javascript jquery ajax settimeout

【解决方案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>

【讨论】：

不知道为什么，但是 prev_request 总是保持错误，这就是为什么 getData(1,2,3), getData(4,5,6), .... 都在运行
只有你的 ajax 被中止，如果你之前的请求正在运行......因为在完成 ajax 时我们已经将 prev_request 设置为 fasle，prev_request 只会在第一个请求运行时为真......跨度>
每 5 秒保持一次 ajax 请求。我需要在单击按钮时完全中止先前的请求。
当你点击 btn 然后 ajax getData(4,5,6) 运行并在回调中再次getData（a，b，c），然后将发送哪个请求？？ getData(4,5,6) 或 getData(1,2,3)
getData(4, 5, 6) only，如果我再次点击 getData(7,8,9) 然后 getData(7,8,9) only

【解决方案2】：

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

分配超时对象

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

清除超时对象

clearTimeout(someGlobalTimeoutObject);

【讨论】：

var myObj = setTimeout(getData, 5000, a, b, c);我正在使用它，但是在单击功能 console.log(myObj) 中说 myObj 未定义
在 getData 外部定义它以使其全局化，然后您就可以在其他函数中访问。一旦你在全局范围内定义了它，就不要在 getData 中使用 var，因为它是一个新的本地对象。

【解决方案3】：

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

【讨论】：