setInterval 中的异步 xhr 请求不起作用

【问题标题】：asynchronous xhr request within setInterval not working | JavascriptsetInterval 中的异步 xhr 请求不起作用 | Javascript
【发布时间】：2017-04-10 22:31:31
【问题描述】：

我正在构建一个跟踪库以将事件发送到后端。每 5 秒创建一个事件（可配置）并发送到跟踪队列，跟踪队列应每 5 秒发送到后端并清空（也可配置）。预期的行为是应该每 5 秒向后端发送一个事件。

当我只是控制台记录事件时，一切都按预期工作，但是当我实现 xhr 请求时，间隔事件仅每 9 秒左右创建一次。所以一个事件会被发送到后端，每两次'post'函数触发一次。

sendData: function(){
    var toSend = [].concat(Tracking.__tracking_queue);
    if(toSend.length !== 0){
        var sendData = this.__stringifyAndSetHeaders(toSend);
        Tracking.postData(sendData);
    }
},

postData: function(sendData){
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        console.log(xhr.responseText);
        Tracking.__tracking_queue = [];
    };
    xhr.open("POST", sendData.url, true);
    Object.keys(sendData.headers).forEach(function(key){
        xhr.setRequestHeader([key], sendData.headers[key]);
    });
    xhr.send(sendData.body);
}

后端正在接收数据，但不是在正确的时间。正在从 setInterval 循环中调用 sendData。

    setInterval(function(){
        self.sendData()
    }, 5000);

我之前在另一个文件中使用axios 完美地运行了相同的设置，但我不能在这个用例中使用 axios。

【问题讨论】：

你试过只调用sendData()而不是self.sendData()吗？
Tracking.__tracking_queue = []; 似乎在错误的位置调用。如果在您构建数据和返回 Ajax 调用之间添加了一些东西到队列中，您将丢失数据。
创建一个重现问题的演示。还应该添加一些错误处理
@brk，这些函数在一个对象变量中。我需要设置“自我”才能让它工作。正在调用该函数。
@epascarello，很好，你这个天才，原来是这样。

标签： javascript asynchronous xmlhttprequest setinterval

【解决方案1】：

您正在错误的位置重置跟踪数据。您读取数据，而不是发出请求，请求完成后，您删除数据。在请求和完成之间有一段时间数据可以进入队列。

sendData: function(){
    var toSend = [].concat(Tracking.__tracking_queue);
    if(toSend.length !== 0){
        var sendData = this.__stringifyAndSetHeaders(toSend);
        Tracking.__tracking_queue = [];  //clear it here
        Tracking.postData(sendData);
    }
},

postData: function(sendData){
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        console.log(xhr.responseText);
        //Tracking.__tracking_queue = [];  //don't clear it here
    };
    xhr.open("POST", sendData.url, true);
    Object.keys(sendData.headers).forEach(function(key){
        xhr.setRequestHeader([key], sendData.headers[key]);
    });
    xhr.send(sendData.body);
}

【讨论】：

谢谢，这正是问题所在。