在 XMLHttpRequest 开始和结束之间循环 JavaScript答案

【问题标题】：Loop JavaScript between XMLHttpRequest start and end在 XMLHttpRequest 开始和结束之间循环 JavaScript
【发布时间】：2020-03-11 21:55:54
【问题描述】：

我正在使用 XMLHttpRequest 执行 AJAX 请求，使用 普通的旧 Javascript（不是 jQuery） 可能需要一些时间。该请求调用处理某些事务的端点。

我可以通过另一个端点检查事务的状态，但我希望在发生异步 AJAX 请求时在屏幕上“刷新”此信息。这个“进度”事务也将是一个 GET AJAX 请求。

我一直在查看 XmlHttpRequest 对象并尝试使用 onprogress，但这并没有像我预期的那样做任何事情，它有点像 while 循环。

在伪代码中，这将是

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'process/', true);
    xhr.send();

    // while request is pending, call another process repeatedly

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                console.log("Request Successful");
            } else {
                console.log("Request Failed");
            }
        } else {
            console.log("Request State changed but not complete");
        }
    }

我似乎无法破解这个。我假设一个取决于适当范围值的 while 循环可能会解决问题，但似乎异步方面不会更新这个值来打破循环。

我认为这对于进度条等可能很常见，但我找不到任何可行的方法？我错过了什么明显的东西吗？

【问题讨论】：

我的猜测是你必须使用setInterval 来启动和完成一个单独的 XHR 来报告进度，而你的第一个 XHR 仍然“工作”。也许将它全部包装在一个可以将回调传递给的函数中。
@dmitrydwhite 谢谢 - 我在发布后不久就设法让它工作。我在下面添加了 sn-p 以防它对其他人有所帮助，尽管我承认这可能不是最有效的方法。

标签： javascript ajax xmlhttprequest

【解决方案1】：

以典型的方式，我在发布后不久就发现了这一点。

我将函数设置为每秒调用一次，然后在请求完成后去掉间隔：

    let intervalId;
    xhr.onloadstart = function (e) {
        intervalId = setInterval(function () {
            myProgressFunction();
        }, 1000)
    };
    xhr.open('GET', '/process', true);
    xhr.send();
    xhr.onloadend = function (e) {
        clearInterval(intervalId);
    };

【讨论】：