JavaScript 范围规则可能被 jQuery/Ajax 篡改？

Question

注意：我会详细说明我为这个问题找到的解决方法，但我仍然不明白为什么第一种方法对我不起作用/不起作用。

我的 HTML 文件有一个 jQuery 脚本，它应该通过 ajax 请求向服务器发送一个数字。这是我的脚本的布局方式：

// Beginning of script
var number = 0; //ensure that the variable has global scope

// Send number to server on click of button (which has type 'button' not 'submit') in HTML document
$(document).ready(function() {
    $( "#button" ).click(function() {
        number = 0; // reset the value of the number every time the button is clicked

        // A function runs here and returns a number, and it has a callback (which gets passed that returned number).
        // Callback is defined as follows:
        function callback(returnedNumber) {
            if (condition == true) {
                alert("Condition passes");
            } else {
                // assign returnedNumber to 'number', then initiate ajax POST request to server
                number = returnedNumber; // just assume returnedNumber is 23
            }

            // Notice that the ajax request is NOT initiated as part of the else statement.
            $.post("test.php", { key: number }, function(data) {
                $( "#resultDiv" ).html(data);
            });
        }
    });
});

现在服务器上的“test.php”文件如下所示：

<?php
    echo var_dump($_POST);
?>

当回调中的条件不通过时，var_dump() 显示$_POST["key"] 的值仍然是 0 而不是 23，这就是我感到困惑的地方。我对 JS 作用域规则的理解是，一旦全局声明了一个变量，函数就可以修改它的值，只要不使用 var 关键字在函数内重新声明变量即可。我认为这意味着使用我的回调来重新分配number 的值也会改变全局变量number 的值，从而允许我将它发送到服务器而无需将ajax 请求作为else 语句的一部分重新分配变量。那么，我错了哪一部分？如果有文档可以帮助澄清我的误解，请提供链接。 :)

我的解决方法：我只是将 ajax POST 请求附加到 else 语句，然后就按我的意愿工作了。但是我不明白为什么当请求不是 else 语句的一部分时，ajax 请求不采用 number 的更新值。

谢谢！

Answer 1

正如您在此示例中所见，您对范围部分的看法是正确的，因此肯定还有其他问题，可能在回调中。也许您正试图以异步方式获取号码，在收到回复之前发布数据？

var condition = false;
var number = 0; //ensure that the variable has global scope

$("#button").click(function() {
  number = 0; // reset the value of the number every time the button is clicked
  function callback(returnedNumber) {
    if (condition == true) {
      //alert("Condition passes");
    } else {
      // assign returnedNumber to 'number', then initiate ajax POST request to server
      number = 23; // just assume returnedNumber is 23
    }
    condition = !condition;
    $("#result").text(`Result: ${number}. Setting condition to ${condition}`);
  }
  // Call the callback as an actual callback
  setTimeout(callback, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Click...</button>
<div id="result"></div>