无法从异步调用返回响应[重复]

Question

Following this fiddle from this question，我写了这段代码：

var currentSlideCount = window.imgIds.length;

for (var i = 11; i < (currentSlideCount + 10); i++) {

// SET UP NEW SLIDE HTML
    var newSlide = '<li><img id="apod' + i + '" class="rounded-corners apod-image"></li>';
    $('#lightSlider').append(newSlide);
    window.imgIds.push('apod'+i);
    console.log(window.imgIds);

// GENERATE DATE
    var date = new Date();
    date.setDate(date.getDate() - i);
    var day = date.getDate();
    var month = date.getMonth();
    var year = date.getFullYear();
    console.log(year + "-" + month + "-" + day);

// GENERATE XML REQUEST
    function foo(callback) {
        var apodUrl = "https://api.nasa.gov/planetary/apod?concept_tags=True&date=" + year + "-" + month + "-" + day;
        var apodXml = new XMLHttpRequest();
        apodXml.open('GET', apodUrl, true);
        apodXml.send(null);

        // WHEN REQUEST IS READY
        apodXml.onreadystatechange=function() {
            if (apodXml.readyState==4 && apodXml.status==200) {
                var apodParse = JSON.parse(apodXml.responseText);
                callback(apodParse.url)
                console.log(apodParse.url);
            }
        }
    }

    foo(function(result) {
        var newSlideId = 'apod' + i;
        document.getElementById(newSlideId).src = result;
    });

然而，我仍然在 img 标记上收到 Cannot set property 'src' of null 控制台错误，该错误是在调用其 src 属性很久之前创建的。据我了解，我已经正确设置了回调。为什么这仍然不起作用？

Answer 1

首先，您在循环中声明函数foo。虽然这不会导致错误，但这是不好的做法。该函数应在循环外声明。

其次，传入foo 的回调函数被异步调用（即通过AJAX）。变量i 在回调函数的父范围和循环中分配了一个值。循环将在调用回调时完成执行。当回调被调用时，它将查找作用域链以找到i 的值，它会找到在循环中声明的i。 i 将等于循环中的最终值，循环条件 i < (currentSlideCount + 10) 计算结果为 false 并且不会继续。

虽然这可能很难理解，但您可以通过在回调函数中添加 alert(i); 来了解我的意思：

 foo(function(result) {
    alert(i);
    var newSlideId = 'apod' + i;
    document.getElementById(newSlideId).src = result;
 });

您可能会惊讶地发现警报将始终为 i 显示相同的值。

为了解决这个问题，你需要使用一个立即执行的函数来创建一个新的作用域，i 作为你想要的正确值通过值传递。

改变这个：

foo(function(result) {
    var newSlideId = 'apod' + i;
    document.getElementById(newSlideId).src = result;
});

到这里：

foo(
    (function(i) {
        return function(result) {
            var newSlideId = 'apod' + i;
            document.getElementById(newSlideId).src = result;
        }
    })(i)
);

在 JavaScript 中，范围是在函数级别描述的。通过使用立即执行的函数，您正在添加一个新范围，其中 i 已按值传递给当前循环迭代。

JavaScript 中的变量作用域可能难以理解，而且您的问题正好针对更复杂的场景之一。您可能会发现在 JavaScript 中查看一些 other explanations 的作用域很有用。

Answer 2

有两个问题：

1. 您正在控制结构中使用函数声明。你不能这样做，这是无效的；一些浏览器会尝试将其重写为函数表达式，但其他浏览器不会。函数声明仅在范围的顶层有效，在所有控制结构之外。例如，在全局范围内或在函数的顶层。

2. 更重要的是，您传递给foo 的回调具有对i 变量的持久引用，而不是创建函数时的副本。所以他们都看到i，当他们运行时，稍后，在循环的结束。

将您的foo 函数移出控制结构，并在理想情况下对其进行参数化，特别是将回调应使用的i 值传递给它。例如：

var currentSlideCount = window.imgIds.length;

for (var i = 11; i < (currentSlideCount + 10); i++) {

    // SET UP NEW SLIDE HTML
    var newSlide = '<li><img id="apod' + i + '" class="rounded-corners apod-image"></li>';
    $('#lightSlider').append(newSlide);
    window.imgIds.push('apod' + i);
    console.log(window.imgIds);

    // GENERATE DATE
    var date = new Date();
    date.setDate(date.getDate() - i);
    var day = date.getDate();
    var month = date.getMonth();
    var year = date.getFullYear();
    console.log(year + "-" + month + "-" + day);

    foo(year, month, day, i, function(result, index) {
        var newSlideId = 'apod' + index;
        document.getElementById(newSlideId).src = result;
    });
}

// GENERATE XML REQUEST
function foo(year, month, day, index, callback) {
    var apodUrl = "https://api.nasa.gov/planetary/apod?concept_tags=True&date=" + year + "-" + month + "-" + day;
    var apodXml = new XMLHttpRequest();
    apodXml.open('GET', apodUrl, true);
    apodXml.send(null);

    // WHEN REQUEST IS READY
    apodXml.onreadystatechange = function() {
        if (apodXml.readyState == 4 && apodXml.status == 200) {
            var apodParse = JSON.parse(apodXml.responseText);
            callback(apodParse.url, index)
            console.log(apodParse.url, index);
        }
    }
}