jQuery 中 getJSON 的范围

Question

使用 getJSON 时，我在尝试管理范围时遇到了一些麻烦。
因此，在 HTML 页面上，我有一个无序列表，需要填充 JSON 文件中的列表项。该列表是轮播的标记。

HTML：

JS：

grabJSON : function() {
    $.getJSON('file.json', function(data) {
        var items = [];
        $.each(data.foo, function(k, v) {
            items.push('<li>' + v.bar + '</li>');
        }
        $('ul.carousel').append(items.join(''));
        // carousel action here
        $('ul.carousel').carouselFunction({
            // carousel options here
        });
    });
}

目前，我必须将 carousel 函数放在 getJSON 函数中。如果我创建另一个函数来设置轮播，我就会失去 getJSON 中的范围。

解决此问题的首选方法是什么，以便我可以拥有从 getJSON 调用的 setupCarousel : function() ？通常，如果我想从对象中的另一个函数调用函数，我可以直接使用 this.setupCarousel() ，但是对于嵌套作用域，我不确定如何处理这个问题。

此外，在 getJSON 函数之外，我无权访问附加的任何元素。因此我可以访问 ul，但不能访问从 getJSON 添加列表项时创建的任何列表项。

Answer 1

$.getJSON 调用是异步的。因此，如果您这样做：

thing.grabJSON();
do_some_other_stuff();

do_some_other_stuff 将在 $.getJSON 调用完成之前执行。您必须将所有内容放入 $.getJSON 回调中，因为该代码段将在将来的某个时间执行；回调可以自由地将其接收到的任何数据传递给其他函数（如 Kishnore 的答案），但在 $.getJSON 之后执行的代码（其中 after 表示源代码中之后code) 不能依赖于 $.getJSON 调用来执行任何操作。

您可以这样做：

function buildCarousel(items) {
    $('ul.carousel').append(items.join(''));
    $('ul.carousel').carouselFunction({
        // carousel options here
    });
}

// ...

grabJSON : function(cb) {
    $.getJSON('file.json', function(data) {
        var items = [];
        $.each(data.foo, function(k, v) {
            items.push('<li>' + v.bar + '</li>');
        }
        cb(items);
    });
}

//...

thing.grabJSON(buildCarousel);

如果您想将 $.getJSON 与需要对该 JSON 执行的操作分开。在这种特殊情况下，像上面那样将其分解是比实际工作更繁忙的工作，但在处理 AJAX 时，这种模式（回调中的回调，一直向下的回调）非常常见。

Answer 2

你尝试过这样的事情吗？

grabJSON : function() {
    $.getJSON('file.json', function(data) {
        var items = [];
        $.each(data.foo, function(k, v) {
            items.push('<li>' + v.bar + '</li>');
        }
        makeCarousel(items);
    });
}
//pass items to make carosuel function and use it this should solve your problem.
makeCarosuel: function(items) {
$('ul.carousel').append(items.join(''));
        // carousel action here
        $('ul.carousel').carouselFunction({
            // carousel options here
        });
}