暂停并恢复ajax重复请求

Question

为了由Wiktor（https://stackoverflow.com/a/43338063/7666076）发布的代码，如何在点击某个按钮后暂停和恢复发送ajax请求（两个不同的按钮，如＆＃39;暂停＆＃39;和＆＃39;播放＆＃ 39。）

如何在点击＆＃34;暂停＆＃34;之后立即打破当前的ajax请求按钮。我不想等待将由ajax查询提取的新数据。

这是我改编的代码：

function RefreshData()
{
    console.log('Sending AJAX request...');
    $.ajax({
        type: "GET",
        url: "getAjaxRequest.php?"+device+"&callback=?",
        dataType: "jsonp"
    }).done(function(dataJSON) {
        adaptJsonData(dataJSON);
        console.log('success');
    }).fail(function() {
        console.log('error');
    }).always(function() {
        intervalTime = 100;
        console.log('Waiting '+intervalTime+' miliseconds...');
        setTimeout(RefreshData, intervalTime);
    });

    return true;
}

function adaptJsonData(dataJSON) {
    # ... some logic with dataJSON object
}

Answer 1

var xhr = null;
function RefreshData() {
    if( xhr != null ) {
       xhr.abort();
        xhr = null;
    }
    xhr = $.ajax({'...'});
}

Answer 2

Beneris的答案非常适合中止当前的$ .ajax请求，但这不能解决.always函数中的setTimeout(function, time)用法。

所以我通过以下方式解决了我的问题：

1. 定义全局变量： var xhr = null - 处理ajax xhr对象，和 var timer - 处理setTimeout参考。

2. 根据Beneris的建议，将$.ajax({...})分配给xhr变量：

var xhr = null; // global variable
var timer; // global variable
function RefreshData() {
    xhr = $.ajax({...});
}

1. 在.always()方法中timer setTimeout()提及xhr = $.ajax({}) .done(function(){}) .fail(function(){}) .always(function(){ timer = setTimeout(RefreshData, 100);//refresh every 100 msec });

$('button.pause').click(function() {
    xhr.abort(); // xhr is in global scope; remove/comment this line if You don't need to abort last ajax request
    xhr = null; // remove/comment this line too if You don't need to abort last ajax request
    clearTimeout(timer); // timer variable is the reference to setTimeout
});
$('button.resume').click(function() {
    RefreshData();
});

1. 现在我可以使用jQuery操作ajax请求：

xhr.abort()

如果有人需要此功能 在不中止最后一个ajax请求的情况下，只需删除行setTimeout。

它是如何工作的？

中止当前的ajax请求：

  

$ .ajax（）函数返回它的XMLHttpRequest对象   创建。通常，jQuery处理此对象的创建   在内部，但制造一个自定义功能可以   使用xhr选项指定。返回的对象通常可以是   丢弃，但确实为观察和提供了一个较低级别的界面   操纵请求。特别是，在。上调用.abort（）   对象将在请求完成之前暂停。

http://api.jquery.com/jquery.ajax/

销毁用于停止刷新的setTimeout方法：

要清除部分clearTimeout(<the_setTimeout_reference>)内容，请使用class App extends Component { fireSort = () => { alert('fireClick') } fireSearch = () => { } render() { return ( <div> <table> <thead> <th onClick={() => this.fireSort()}> My TH <input onChange={()=>this.fireSearch()} type="text" placeholder="search" /> </th> </thead> <tbody> <tr><td>value</td></tr> </tbody> </table> </div> ); } }

https://www.wittysparks.com/forums/topic/how-to-kill-or-cancel-or-remove-settimeout-with-cleartimeout/