Search code examples
jqueryasynchronousjfeed

Jquery syncrounous issues


Ok so I have a basic function that get's 2 feeds. My issue is that the function, running asynchronously skips down to the alert function(in for testing) before it's doing the function to get both feeds. I'm sure there's a viable solution but it has me scratching my head. here's the script. I'd greatly appreciate the help, thanks!

function getFeeds(){
    jQuery.getFeed({
        url: 'proxy.php?url='+feed1,
        success: function(feed) {       

            for(var i = 0; i < feed.items.length && i < 10; i++) {

                var item = feed.items[i];

                s_string += '<div class = \"cont_div a'+i+'\"><h2>'
             /*   + '<a href="'
                + item.link
                + '">'*/
                + item.title
                /*+ '</a>'*/
                + '</h2></div>';

               /* html += '<div class="updated">'
                + item.updated
                + '</div>';

                html += '<div>'
                + item.description
                + '</div>';*/
            }

        }  
    });    
    jQuery.getFeed({
        url: 'proxy.php?url='+feed2,
        success: function(feed) {       

            for(var i = 0; i < feed.items.length && i < 10; i++) {

                var item = feed.items[i];

                s_string += '<div class = \"cont_div a'+i+'\"><h2>'
             /*   + '<a href="'
                + item.link
                + '">'*/
                + item.title
                /*+ '</a>'*/
                + '</h2></div>';

               /* html += '<div class="updated">'
                + item.updated
                + '</div>';

                html += '<div>'
                + item.description
                + '</div>';*/
            }


       } 
    });    
alert(s_string);
} 

Solution

  • You have to handle the two requests as separate timelines:

    1. create two variables for success indicators
    2. put a check inside of the callbacks
    3. which request finishes last would do your finished_callback

    The code is something like this:

    function getFeeds(finished_callback) {
        var feed_a_finished = false,
            feed_b_finished = false,
            s_string = "";
    
        jQuery.getFeed( {
            url: 'proxy.php?url='+feed1,
            success: function(feed) {
                /* Your code ... */
                feed_a_finished = true;
                if (feed_a_finished && feed_b_finished) {
                    finished_callback();
                }
            }  
        });
        feed_b_finished = false; 
        jQuery.getFeed({
            url: 'proxy.php?url='+feed2,
            success: function(feed) {       
                /* Your code ... */
                feed_b_finished = true;
                if (feed_a_finished && feed_b_finished) {
                    finished_callback();
                }
            } 
        });
    }
    
    getFeeds(function () {
        alert(s_string);
    });