Question

自调用closure函数的奇怪语法意味着您实际上是在调用函数本身，因此将其设为self-invoking。以下是一些证明这一点的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>
            A Nameless Function that Executes Itself
        </title>
    </head>

    <body onload = "mainMethod();">

        <div id = "here"></div>

        <script type = "text/javascript">

            function mainMethod()
            {
                var here = document.getElementById("here");
                var hello = "Hello World!";

                here.innerHTML = function()
                {
                    return hello + "<br />";
                }(); // WITH method parentheses -- self-invoking

                here.innerHTML += function()
                {
                    return hello;
                }; // withOUT method parentheses
            }
        </script>
    </body>
</html>

...上面的第二个函数不执行，因为它没有结束括号，innerHTML成为整个函数本身。那么，为什么标准的Ajax语法不能以相同的方式使用自调用？似乎XMLHttpRequest以独特的方式处理onreadystatechange属性。这是一个例子：

function getStock()
{
    var req = new XMLHttpRequest();

    var stock = document.getElementById("stock");

    req.onreadystatechange = function()
    {
        if( (req.readyState == 4) && (req.status == 200) )
        {
            // value of stock
            var stockValue = req.responseText;

            stock.innerHTML = stockValue;
        }
    }
    req.open("GET", "randomStockValue.php?random=", true);
    req.send(null);

    setTimeout("getStock()", 1000);
}

注意结束括号的缺少 ...我问这个是因为我想进一步理解Ajax语法，以及它到底在做什么。

Answer 1

readystatechange属性包含一个回调函数（有时也称为事件处理函数），当某些ajax事件发生时，将来会多次调用浏览器的ajax引擎。

您不希望它立即执行。您希望在将来发生这些特定事件时调用您为其分配的功能。你不希望它是自动执行的。

有关将来某个时间调用的事件侦听器或回调函数的其他示例，请参阅addEventListener()或setTimeout()等方法。

Answer 2

它注册一个事件监听器。该函数不会立即执行，它（Function对象）只是分配给onreadystatechange属性。稍后将调用它 - 当ajax请求更改其状态时。它类似于具有未知超时的setTimeout（并且将被多次调用）。

Answer 3

ajax调用处理程序没有什么特别之处，你可以为第一个例子编写完全相同的代码，它将执行相同的等待：

      function mainMethod()
            {
                var here = document.getElementById("here");
                var hello = "Hello World!";

                here.innerHTML = function()
                {
                    return hello + "<br />";
                }(); // WITH method parentheses -- self-invoking

                here.innerHTML += function()
                {
                    return hello;
                }; // withOUT method parentheses
            }

document.body.onload = mainmethod ;

你给出的2个例子并没有共享相同的背景，这就是为什么他们的行为确实不同。

现在尝试

document.body.onclick = mainmethod ;

在您点击网页之前，您的功能将无法执行。 ajax调用也是一样。

为什么Ajax不使用自我调用？

3 个答案: