javascript - 当另一个功能完成时，如何触发功能？

Question

我正在使用 JQuery 使用 Twitter API 收集最新推文，但在调用两个函数时遇到一些问题。

$(document).ready(function(){
 JQTWEET.loadTweets(); 

});

这个工作正常，但是我想调用这个函数:

showHideTweets: function() {
    alert("hola");
    var ojeto = $(JQTWEET.appendTo).find(".item").first();
    $(JQTWEET.appendTo).find(".item").first().css("display", "block");
},

两个函数都在里面:jqtweet.js ...

loadTweets: function() {

    var request;

    // different JSON request {hash|user}
    if (JQTWEET.search) {
      request = {
          q: JQTWEET.search,
          count: JQTWEET.numTweets,
          api: 'search_tweets'
      }
    } else {
      request = {
          q: JQTWEET.user,
          count: JQTWEET.numTweets,
          api: 'statuses_userTimeline'
      }
    }

    $.ajax({
        url: 'tweets.php',
        type: 'POST',
        dataType: 'json',
        data: request,
        success: function(data, textStatus, xhr) {

            if (data.httpstatus == 200) {
                if (JQTWEET.search) data = data.statuses;

            var text, name, img;             

            try {
              // append tweets into page
              for (var i = 0; i < JQTWEET.numTweets; i++) {     

                img = '';
                url = 'http://twitter.com/' + data[i].user.screen_name + '/status/' + data[i].id_str;
                try {
                  if (data[i].entities['media']) {
                    img = '<a href="' + url + '" target="_blank"><img src="' + data[i].entities['media'][0].media_url + '" /></a>';
                  }
                } catch (e) {  
                  //no media
                }

                var textoMostrar = JQTWEET.template.replace('{TEXT}', JQTWEET.ify.clean(data[i].text) ).replace('{USER}', data[i].user.screen_name).replace('{IMG}', img).replace('{URL}', url );
                /*.replace('{AGO}', JQTWEET.timeAgo(data[i].created_at) )   */
                //alert(JQTWEET.timeAgo(data[i].created_at));


                $(JQTWEET.appendTo).append( JQTWEET.template.replace('{TEXT}', JQTWEET.ify.clean(data[i].text) )
                    .replace('{USER}', data[i].user.screen_name)
                    .replace('{NAME}', data[i].user.name)
                    .replace('{IMG}', img)
                    .replace('{PROFIMG}', data[i].user.profile_image_url)
                    /*.replace('{AGO}', JQTWEET.timeAgo(data[i].created_at) )*/
                    .replace('{URL}', url )                                     
                    );
                if ( (JQTWEET.numTweets - 1) == i) {
                 $(JQTWEET.appendTo).find(".item").last().addClass("last");
                } 
                }
            } catch (e) {
              //item is less than item count
            }

             if (JQTWEET.useGridalicious) {                
                //run grid-a-licious
        $(JQTWEET.appendTo).gridalicious({
            gutter: 13, 
            width: 200, 
            animate: true
        });                    
         }                  

           } else alert('no data returned');

        }   

    });
    callback();
}, 

showHideTweets: function() {
    alert("hola");
    var ojeto = $(JQTWEET.appendTo).find(".item").first();
    $(JQTWEET.appendTo).find(".item").first().css("display", "block");
},

问题是，如果调用的功能如下:

$(document).ready(function(){
 JQTWEET.loadTweets();
 JQTWEET.showHideTweets();

});

第二个函数在推文加载之前执行，因此它没有任何可搜索的内容，因为我可以看到警报(“hola”)正在工作，但Ojeto为0。

我试图在 loadTweets(); 中创建某种回调，但我做不到。

Answer 1

回调不是一个坏主意。

将 loadTweets 更改为如下所示:

loadTweets: function(callback) {

并在这里调用它:

$.ajax({
    ...
    success: function(data, textStatus, xhr) {
        ...
        if (callback) callback();
    }
});

然后在 DOM 就绪回调中:

$(document).ready(function(){
 JQTWEET.loadTweets(JQTWEET.showHideTweets);
});

您的另一个选择(通常我实际上更喜欢)是使用deferred对象:

loadTweets: function(callback) {
    var def = $.Deferred();
    ...
    $.ajax({
        ...
        success: function(data, textStatus, xhr) {
            ...
            def.resolve();
        }
    });
    return def.promise();
}

...

$(document).ready(function(){
 JQTWEET.loadTweets().done(JQTWEET.showHideTweets);
});