Javascript 单击，等待现有XMLhttprequest（）完成

我正在为这个挑战挣扎

我需要做三件事：

• 单击按钮/表单提交后，等待下一页完成加载
• 然后，等待页面上现有的API/GET请求完成
• 然后检查该API请求的结果

我遇到的问题是，当我单击我的按钮时，下一页甚至没有机会完成加载，我的API检查立即执行

我看过很多解决方案，异步/等待，有些建议不要使用setTimeOut。我似乎仍然无法克服第一个障碍，等待页面完成加载并允许现有API调用完成

如何等待现有API调用完成运行

let button = document.getElementById("signin");
button.setAttribute("onClick", "fireTracking()");

function ajax(url) {
    return new Promise(function(resolve, reject) {
      var xhr = new XMLHttpRequest();
      xhr.onload = function() {
        resolve(this.responseText);
      };
      xhr.onerror = reject;
      xhr.open('GET', url);
      xhr.send();
    });
  }
  
function fireTracking() {
    ajax("www.myurl.com/getstatus")
    .then(function(result) {
    // Code depending on result
    console.log(result);
    console.log("fire event...")
  })
  .catch(function() {
    // An error occurred
  });
}

让人困惑的是，页面的URL是相同的。因此，本质上，我无法寻找不同的URL

我开始觉得我可能需要使用setTimeout？例如，等待1秒，然后进行新的api调用

---

请注意，这是运行在应用程序顶部的代码。我使用的是AB测试工具，所以我基本上是想让它在已经编译的代码上运行。

该按钮在触发

fireTracking

功能的同时提交

表单

所以。。。提交正在刷新页面，Ajax请求的结果将丢失

你必须这么做

下面是代码的“最小更改”：

let button = document.getElementById("signin");
button.setAttribute("onClick", "fireTracking(event)");  // Add the event argument

function ajax(url) {
    return new Promise(function(resolve, reject) {
      var xhr = new XMLHttpRequest();
      xhr.onload = function() {
        resolve(this.responseText);
      };
      xhr.onerror = reject;
      xhr.open('GET', url);
      xhr.send();
    });
  }
  
function fireTracking(event) {  // Add the event argument
    event.preventDefault()  // Add this
    ajax("www.myurl.com/getstatus")
    .then(function(result) {
    // Code depending on result
    console.log(result);
    console.log("fire event...")
  })
  .catch(function() {
    // An error occurred
  });
}

但是一个好的做法是使用
.addEventListener（）
，如@epacarello所述，为该按钮设置事件处理程序。
button.setAttribute（“onClick”，“fireTracking（）”不使用setAttribute绑定events@epascarello嗨，为什么不呢？到目前为止，它似乎工作得很好。。。我必须通过DOM操作来实现这一点，因为我使用的是应用程序。如果不插入onclick，这在移动设备上就不起作用。我以前使用过eventlistener…因为正确的方法是使用AddEventListener。我没有完全了解您的问题，但在这些情况下，表单按钮通常很有用。只需删除type=“submit”prop或使用event.preventDefault（）。顺便说一下，最好将fireTracking（）函数绑定到表单的提交事件。