1

几天来我一直在研究这个问题，但我根本不明白我做错了什么。我的代码似乎存在一些问题，我现在根本看不到树木的树木。我在下面的代码中包含了一些注释。

(function (myPage, $, undefined) {

    myPage.contextsArrays = [];
    myPage.currentContextsArray = [];

    myPage.getTags = function (event) {

        // try to resolve tags from local variable
        myPage.currentContextsArray = $.grep(myPage.contextsArrays, function (elm) { return elm.id == event.tagArea.Id; });

        if (myPage.currentContextsArray.length == 0) {

            $.getJSON('/exercises/getstrategycontexts/' + event.tagArea.Id, null, function (tags) {

                // despite 200 response codes from the server this doesn't ever get executed …
                myPage.contextsArrays.push({ id: event.tagArea.Id, items: tags });
                myPage.currentContextsArray = tags;

                alert(myPage.currentContextsArray);    
            });
        }

        $.get('/templates/strategycontextdc.html', function (template) {

            $('#tagHost').html('');
            $('#tagHostTitle').html('Tags - ' + event.tagArea.Text);

            // myPage.currentContextsArray is ALWAYS [ ]
            $.each(myPage.currentContextsArray, function (i, tag) {

                var html = Mustache.to_html(template, tag);
                $('#tagHost').append(html);
            });
        });
    };

}(window.myPage = window.myPage || {}, jQuery));

我在这里尝试做的是局部变量中值的一些基本缓存。这些标签在 UI 中用于为用户提供一种针对值添加分数的方法。

如果尚未请求并存储在本地变量中，我只想从服务器请求一组标签。

我不明白的是 $.getJSON() 已执行（发出请求并随数据一起接收了 200 个代码）但从未执行回调函数，因此我的标签集合永远不会存储在数组中稍后检索或设置在当前标签的变量中以立即在 UI 中使用（因此，如果重新请求，也永远无法解决）。

我经常使用这个 jQuery 命令，但我不明白为什么在这种情况下从来没有执行过。我基本上看不到代码的问题。

我已经尝试了所有我能想到的东西（我对 JS 真的还是很陌生），并且我已经用尽了我的知识，知道为什么这段代码根本没有按预期运行。

4

1 回答 1

1

您需要确保 AJAX 调用的回调以正确的顺序触发（因为其中一个依赖于另一个的结果）。您可以为此使用jqXHR-object的promise-interface：

(function (myPage, $, undefined) {

    myPage.contextsArrays = [];
    myPage.currentContextsArray = [];

    myPage.getTags = function (event) {

        // try to resolve tags from local variable
        myPage.currentContextsArray = $.grep(myPage.contextsArrays, function (elm) { return elm.id == event.tagArea.Id; });

        var dfd; //this is where we'll store either the AJAX call's promise when we need to wait for the AJAX call to finish or simply store true if we don't

        if (!myPage.currentContextsArray.length) {

            dfd = $.getJSON('/exercises/getstrategycontexts/' + event.tagArea.Id, null, function (tags) {

                // despite 200 response codes from the server this doesn't ever get executed …
                myPage.contextsArrays.push({ id: event.tagArea.Id, items: tags });
                myPage.currentContextsArray = tags;

                alert(myPage.currentContextsArray);    

            }).promise();

        } else {

            dfd = true;

        }

        $.when(dfd).then(function(){ // $.when will either wait for the passed promise's resolve or immediately execute the function passed to then() when passed true

            $.get('/templates/strategycontextdc.html', function (template) {

                $('#tagHost').html('');
                $('#tagHostTitle').html('Tags - ' + event.tagArea.Text);

                // myPage.currentContextsArray is ALWAYS [ ]
                $.each(myPage.currentContextsArray, function (i, tag) {

                    var html = Mustache.to_html(template, tag);
                    $('#tagHost').append(html);
                });
            });
        });
    };

}(window.myPage = window.myPage || {}, jQuery));

阅读更多关于promise()

于 2013-07-18T14:15:33.050 回答