变量不在其范围内保持价值[重复]答案

【问题标题】：Variable not holding value inside their scope [duplicate]变量不在其范围内保持价值[重复]
【发布时间】：2020-03-25 08:23:07
【问题描述】：

在下面的函数中，我有这两个变量，size 和total，它们应该在整个函数块中都可以访问，但是当执行到达第三个if 时，它们呈现的值是@987654324 @：

function update_cart() {
  var cart_size = document.getElementById('cart_size');
  var cart_status = document.getElementById('cart_status');
  var cart_total = document.getElementById('cart_total');

  var size, total;

  if(cart_size !== null) {
    var cliente = cart_size.dataset.cliente;
    var url = cart_size.dataset.url;

    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        size = xhr.responseText;
        cart_size.innerHTML = size;
        if(size == 0)
          cart_size.style.display = 'none';
        else
          cart_size.style.display = 'block';
      }
    };
    var formData = new FormData();
    formData.append("cliente", cliente);
    xhr.send(formData);
  }

  if(cart_total !== null) {
    var cliente = cart_total.dataset.cliente;
    var url = cart_total.dataset.url;

    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        total = xhr.responseText;
        var currency = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(total);
        cart_total.innerHTML = currency;
      }
    };
    var formData = new FormData();
    formData.append("cliente", cliente);
    xhr.send(formData);
  }

  if(cart_status !== null) {
    switch(size) {
      case 0:
        cart_status.innerHTML = 'A cesta de compras está vazia.';
        document.getElementById('table').style.display = 'none';
        break;
      case 1:
        cart_status.innerHTML = size + ' produto adicionado na cesta, com valor ' + total;
        document.getElementById('table').style.display = 'block';
        break;
      default:
        cart_status.innerHTML = size + ' produtos adicionados na cesta, com valor ' + total;
        document.getElementById('table').style.display = 'block';
        break;
    }
  }
}

我已经尝试使用var 和let 声明它们，结果相同。在cart_status存在的页面中，cart_size和cart_total都存在。

任何人都可以提示如何解决这个问题？

【问题讨论】：

这两个变量是？ cart_size 和 cart_total？
我不明白？你对什么它们是什么意思？
来吧，只要说明你说的两个变量是什么。
你似乎没有在我在代码中看到的任何地方给它们赋值。
我认为您的第三个 if() 在您的请求完成之前正在执行。

标签： javascript scope var let

【解决方案1】：

您必须了解对xhr.onreadystatechange 的调用是异步调用。因此，如果您尝试在异步操作发生/解决之前捕获/使用 size 或 total 的值，您将在其中获得 undefined 值。

在它们来自异步调用之后，你需要做的是使用回调来处理它们的值。

【讨论】：

【解决方案2】：

它不起作用，因为这些变量是在回调中定义的。

xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        size = xhr.responseText;
        cart_size.innerHTML = size;
        if(size == 0)
          cart_size.style.display = 'none';
        else
          cart_size.style.display = 'block';
      }
    };

此代码是异步调用的，请阅读：稍后，当您收到网络调用的响应时。
如果要访问该变量，则必须将使用该变量的代码移动到回调中。

【讨论】：

【解决方案3】：

正如其他人所说，XMLHttpRequest 默认情况下是异步的。这意味着它不会阻止脚本的其余部分执行。

因此您可以等到第一个请求完成后再执行下一个请求，在第二个请求完成后，您应该拥有所需的所有值。

我认为是这样的：

var firstRequest = new XMLHttpRequest();
firstRequest.open('POST', 'someUrl');
firstRequest.onreadystatechange = function() {
  if (firstRequest.readyState == 4 && firstRequest.status == 200) {
    size = firstRequest.responseText;
    var secondRequest = new XMLHttpRequest();
    secondRequest.open('POST', 'someOtherUrl');
    secondRequest.onreadystatechange = function() {
      if (secondRequest.readyState == 4 && secondRequest.status == 200) {
        total = secondRequest.responseText;
        // Now you should have both size and total variables available
      }
    };
  }
};

不漂亮，但应该可以。

【讨论】：