在js里面如何确保执行完xhr 取得某变量值后，再执行一个函数

可以将需要在xhr取得变量值后执行的函数写成回调函数，并在xhr的回调函数中调用，确保xhr取得变量值后再执行。示例代码如下：

function xhrRequest(callback) {
  // 发送xhr请求，取得变量值
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'example.com/api/data');
  xhr.onload = function () {
    if (xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      const variable = data.variable;
      callback(variable); // 在xhr回调函数中调用回调函数，确保xhr取得变量值后再执行
    }
  };
  xhr.send();
}

function myFunction(variable) {
  // 执行需要在xhr取得变量值后执行的函数
  console.log(variable);
}

xhrRequest(myFunction); // 将需要在xhr取得变量值后执行的函数作为回调函数传入xhrRequest函数中

相关问题

for循环里xhr.onload回调i的值固定

在JavaScript中，for循环中使用xhr.onload回调函数时，可能会遇到一个常见的问题，即循环结束后，回调函数中的变量i的值是循环的最后一个值。这是因为JavaScript的闭包（closure）行为，循环结束后，变量i的值已经变成了循环的终值，而 xhr.onload 可能是在循环结束后才执行的异步操作。

为了确保每个 xhr.onload 都能得到正确的索引值，可以创建一个新的作用域来保存每次循环的i值，通常的做法是创建一个立即执行的函数表达式（IIFE），如下所示：

var xhrs = []; // 假设这是一个存放XMLHttpRequest对象的数组

for(var i = 0; i < someLength; i++) {
    xhrs[i] = new XMLHttpRequest();
    xhrs[i].onload = (function(index) {
        return function() {
            // 这里的index就是我们期望的i的值
            console.log("处理异步响应的索引为: " + index);
        };
    })(i);
    // 发起请求等其他操作...
}

在上面的代码中，我们通过一个匿名函数立即执行了一个闭包，并且将当前的循环变量i作为参数传递给这个函数。这个闭包会捕获每次循环时的i值，从而使得每个xhr.onload回调函数中的`index`变量都能保持正确的值。

解释代码<script> // 当输入框内容改变时触发 document.getElementById("username-input").addEventListener("input", function() { var username = this.value; // 发送Ajax请求到后端，检测用户名是否存在 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var response = JSON.parse(xhr.responseText); var errorDiv = document.getElementById("username-error"); if (response.exists) { errorDiv.textContent = "用户名已存在"; } else { errorDiv.textContent = ""; } } }; xhr.open("POST", "/checkUsernameExistence"); // 后端检测用户名存在的接口 xhr.setRequestHeader("Content-Type", "application/json"); xhr.send(JSON.stringify({ username: username })); }); </script>

这段代码是一个 JavaScript 脚本，用于在输入框内容改变时触发事件，并发送 Ajax 请求到后端来检测用户名是否存在。

让我们逐行解释代码：

1. `document.getElementById("username-input")` 获取了一个具有 id `"username-input"` 的 HTML 元素，这里是一个输入框，用于输入用户名。

2. `addEventListener("input", function() { ... })` 给输入框添加了一个事件监听器，当输入框内容改变时触发。

3. `var username = this.value;` 获取到当前输入框的值，即用户输入的用户名。

4. 创建了一个 XMLHttpRequest 对象 `xhr`，用于发送 HTTP 请求到后端。

5. `xhr.onreadystatechange` 是一个事件处理函数，当 `readyState` 属性发生变化时被触发。在这个代码中，我们检查 `xhr.readyState` 的值是否为 4（表示请求已完成），以及 `xhr.status` 的值是否为 200（表示请求成功）。

6. `JSON.parse(xhr.responseText)` 解析后端返回的响应文本为 JSON 对象，存储在 `response` 变量中。

7. `var errorDiv = document.getElementById("username-error");` 获取具有 id `"username-error"` 的 HTML 元素，这里是一个用于显示错误信息的 `<div>` 元素。

8. 根据后端返回的 JSON 对象中的 `exists` 属性，判断用户名是否已存在。如果存在，则将错误提示信息设置为 `"用户名已存在"`，否则将错误提示信息清空。

9. `xhr.open("POST", "/checkUsernameExistence");` 设置请求的方法为 POST，并指定后端检测用户名存在的接口路径为 `"/checkUsernameExistence"`。

10. `xhr.setRequestHeader("Content-Type", "application/json");` 设置请求的内容类型为 JSON。

11. `xhr.send(JSON.stringify({ username: username }));` 发送包含用户名的 JSON 数据到后端。

这段代码的作用是实时检测用户输入的用户名是否已存在，并根据结果更新页面上的错误提示信息。如果用户名已存在，则在具有 id `"username-error"` 的 `<div>` 元素中显示红色的 `"用户名已存在"` 提示信息，否则清空错误提示信息。

请注意，这段代码仅为示例，您需要根据实际情况进行调整和完善。