Question

我有一个页面可以加载来自多个已保存的Instagram Feed的帖子。 Feed对象如下所示：

{'feed_type' : 'search', 'feed_term' : '#cars'}
{'feed_type' : 'profile', 'feed_term' : 'FerrariOfficial'}

如果Feed与Instagram个人资料而非主题标签相关，我们需要先查询Instagram API以获取该用户名的ID（因为Instagram不允许按用户名查询）。

页面上还有一个用于添加新Feed的表单，我想在添加Feed后重复使用这些检查并显示方法。

我有以下功能：

getInstagramIdFromUsername()
displayPosts()
addNewFeed()

理想情况下，这将是主要逻辑：

onLoad() {
    // for each feed...
    if (f.feed_type == "profile") {
        getInstagramIdFromUsername(f);
    }
    displayPosts(f);
}

onAddFeedFormSubmitted(f) {
    if (f.feed_type == "profile") {
        getInstagramIdFromUsername(f);
    }
    addNewFeed(f);
    displayPosts(f);
}

但是我在构造逻辑时遇到了麻烦，因为所有这些函数都是异步AJAX调用。最好的方法是什么？我应该在这里使用jQuery＆＃39; s Deferred Object吗？

Answer 1

如果函数是异步的，则应添加回调功能;

getInstagramIdFromUsername(callback)

回调在获得Feed后得到执行，所以你可以这样：

onLoad() {
    if (feed_type == "profile") {
        getInstagramIdFromUsername(function() {displayPosts();});
    } else { 
        displayPosts();
    }
}

Answer 2

您只需返回$ .ajax函数返回的Object即可。它是一个延迟对象：

onLoad() {
// for each feed...
if (f.feed_type == "profile") {
    getInstagramIdFromUsername(f).done(function(data){
        displayPosts(f);
    });
}else{
    displayPosts(f);
}

}

onAddFeedFormSubmitted(f) {
if (f.feed_type == "profile") {
    getInstagramIdFromUsername(f).done(function(data){
    addNewFeed(f);
    displayPosts(f);
 });
}else{

}
}

所以你的getInstagramFromUsername函数看起来像这样：

function getInstagramIdFromUsername(){
   return $.ajax({
       url:"api/"
    });
}

您可以使用自定义数据类型实现更高级的行为。看看http://api.jquery.com/jquery.ajax/

带有链式AJAX调用的条件逻辑

2 个答案: