jQuery中getJSON的范围 [英] Scope for getJSON in jQuery

问题描述

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

I'm having a bit of trouble trying to manage scope when using getJSON.
So on a HTML page I have an unordered list to be filled with list items from a JSON file. The list is markup for a carousel.

HTML:
<ul class="carousel"></ul>

HTML:
<ul class="carousel"></ul>

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
        });
    });
}

当前，我必须将轮播函数放置在getJSON函数中.如果我使用另一个函数来设置轮播，则会丢失getJSON中的范围.

Currently, I have to place the carousel function within the getJSON function. If I make another function for setting up the carousel, I lose the scope within getJSON.

实现此目的的首选方法是什么，这样我就可以得到一个从getJSON调用的setupCarousel : function()?通常，如果我想从对象中的另一个函数调用一个函数，我可以直接执行this.setupCarousel()，但是对于嵌套作用域，我不确定如何处理.

What is a preferred method of breaking this out so I can have a setupCarousel : function() that is called from getJSON? Normally if I want to call a function from another function in an object I can just go this.setupCarousel(), however with nested scope I'm not sure how to handle this.

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

Also, outside of the getJSON function I do not have access to any of the elements that were appended. So I can access ul, but not any of the list items created while adding them from getJSON.

推荐答案

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

The $.getJSON call is asynchronous. So, if you do this:

thing.grabJSON();
do_some_other_stuff();

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

The do_some_other_stuff will be executed before the $.getJSON call finishes. You have to put everything inside the $.getJSON callback because that piece of code will be executed at some time in the future; the callback is free to pass any data it receives to other functions (as in Kishnore's answer) but code that is executed after $.getJSON (where after means after in the source code) can't depend on the $.getJSON call doing anything.

您可以执行以下操作:

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时，这种模式(回调中的回调，一直向下的回调)是很常见的.

if you wanted to separate the $.getJSON from what needs to be done with that JSON. In this particular case, breaking it apart like the above is more busy work than real work but that sort of pattern (callbacks within callbacks, callbacks all the way down) is pretty common when dealing with AJAX.

这篇关于jQuery中getJSON的范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！