javascript - 在客户端缓存 JSON 数组

Question

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

(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 还很陌生)，并且我已经用尽我的知识来了解为什么这段代码的行为不符合预期。

Answer 1

您需要确保 AJAX 调用的回调以正确的顺序触发(因为其中一个调用依赖于另一个的结果)。您可以使用jqXHR-对象的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()