javascript - 如何将控制权交还给主函数 - jQuery、JS

Question

我正在为 API 调用网站编写代码作为练习。我编写了一个函数来获取数据，另一个函数将文章片段呈现到页面上。我的目的是能够清除页面以显示完整的文章内容。

我使用 jQuery 函数来实现这一点。我的问题是，在调用渲染文章片段的函数后，我无法调用 $(document).ready() 部分中的任何其他函数(因为控件似乎仍然位于内部) renderSnippet 函数)。

我希望能够从 $(document).ready() 调用 News.clearView 但它没有发生。但是，如果我从 renderSnippet 函数内部调用它，它就会起作用。

所以我的问题是:调用 renderSnippet 后如何返回到 $(document).ready() 部分？我尝试尝试使用 return 语句，但这没有帮助。

apiquery.js

var News = {
    get: function(query, callback) {          
            $.ajax({
            url: "http://content.guardianapis.com/search",
            type: "GET",
            data: query,
            dataType: "json",
            success: function(json) {
                callback(json.response.results);     
            },
            error: function(xhr, status, errorThrown) {
                alert("Sorry, there was a problem!");
                console.log("Error: " + errorThrown);
                console.log("Status: " + status);
                console.dir(xhr);
            },

        });  
    },
    renderSnippet: function(quantity, query) {
        News.get(query, function(data) {
        $.get("views/home.html", function(contents) {
            // renders snippets to home page
            for(var i = 0; i < quantity; i++) {
                var helper = contents;
                helper = helper.replace("${Title}", data[i].webTitle);
                helper = helper.replace("${Snippet}", data[i].fields.standfirst);
                $('div.news').append(helper);
            }
            //News.clearView(); // This one works
        }, 'html');

        });
    },
    clearView: function() {
        $('div.news').empty();
    }
}


$(document).ready(function() {
    News.renderSnippet(10, "q=technology&show-fields=all&api-key=test");
    News.clearView(); // This is not working
});

谢谢!

Answer 1

您也可以在那里使用回调方法，就像在 get 函数中使用的那样。

 renderSnippet: function(quantity, query,callback) {
    News.get(query, function(data) {
    $.get("views/home.html", function(contents) {
        // renders snippets to home page
        for(var i = 0; i < quantity; i++) {
            var helper = contents;
            helper = helper.replace("${Title}", data[i].webTitle);
            helper = helper.replace("${Snippet}", data[i].fields.standfirst);
            $('div.news').append(helper);
        }
        //News.clearView(); // This one works
         calllback();
    }, 'html');

    });
},

在准备好的文档中，您可以进行这样的调用

News.renderSnippet(10, "q=technology&show-fields=all&api-key=test",function(){
    News.clearView();
});