javascript - 内部 $.getJSON 不会转到循环中的第二个元素

Question

array1 是 ["orange","blue"]。

$.getJSON("path1.json",function(array1){
    for (var i = array1.length - 1; i >= 0; i--) {
        var path2 = array1[i];
        console.log(path2);
        $.getJSON(path2,function(someObject){
            console.log("Inside the second $.getJSON function");
            console.log(path2);
        });
    }
});

输出如下所示。

"orange"
"blue"
"Inside the second $.getJSON function"
"blue"
"Inside the second $.getJSON function"
"blue"

为什么输出不是这样的？

"orange"
"Inside the second $.getJSON function"
"orange"
"blue"
"Inside the second $.getJSON function"
"blue"

Answer 1

发生了两件事:

• $.getJSON() 是部分异步的。这意味着您的回调是异步发生的。
• 用 var 声明的变量的作用域为函数，而不是 block ，并且，虽然您可以使用 var 在给定作用域中重新声明变量，但这样做没有效果。

当您组合这些东西时，您最终会遇到这样一种情况:for 循环的所有迭代都在调用任何回调之前完成，因此，当回调发生时，path2 已更新多次。 (巧合的是，这实际上不会影响内部 $.getJSON() 调用本身，因为 path2 是按值传递的。)

在过去，我们必须修复 path2 值的范围(通常通过 IIFE )，以便在执行回调之前它不会被覆盖:

$.getJSON("path1.json", function(array1){
    for (var i = array1.length - 1; i >= 0; i--) {
        var path2 = array1[i];
        console.log(path2);
        $.getJSON(path2,
            function(path2) {
                return function(someObject){
                    console.log("Inside the second $.getJSON function");
                    console.log(path2);
                };
            }(path2)
        );
    }
});

现在，我们有了 let，它将变量的范围限定在 block 内。 for 的 block 作用域在每次迭代时都会创建新的，并且每次创建回调函数时该作用域实例都会绑定(bind)到回调，因此以下工作有效:

$.getJSON("path1.json",function(array1){
    for (var i = array1.length - 1; i >= 0; i--) {
        let path2 = array1[i];
        console.log(path2);
        $.getJSON(path2, function(someObject){
            console.log("Inside the second $.getJSON function");
            console.log(path2);
        });
    }
});