How to structure my code to return a callback?

Question

So I've been stuck on this for quite a while. I asked a similar question here: How exactly does done() work and how can I loop executions inside done()? but I guess my problem has changed a bit.

So the thing is, I'm loading a lot of streams and it's taking a while to process them all. So to make up for that, I want to at least load the streams that have already been processed onto my webpage, and continue processing stream of tweets at the same time.

loadTweets: function(username) {
    $.ajax({
            url: '/api/1.0/tweetsForUsername.php?username=' + username
        }).done(function (data) {

            var json = jQuery.parseJSON(data);
            var jsonTweets = json['tweets'];

            $.Mustache.load('/mustaches.php', function() {
                for (var i = 0; i < jsonTweets.length; i++) {
                    var tweet = jsonTweets[i];
                    var optional_id = '_user_tweets';
                    $('#all-user-tweets').mustache('tweets_tweet', { tweet: tweet, optional_id: optional_id });

                    configureTweetSentiment(tweet);
                    configureTweetView(tweet);
                }
            });
        });
    }};
}

This is pretty much the structure to my code right now. I guess the problem is the for loop, because nothing will display until the for loop is done. So I have two questions.

How can I get the stream of tweets to display on my website as they're processed?
How can I make sure the Mustache.load() is only executed once while doing this?

Are you calling the loadtweets method multiple times? When you say stream does it mean stream of tweets or stream of users? — tusharmath, Aug 16 '13 at 23:49
I'm calling it only when the user clicks on a certain link. I also mean stream of tweets. — dtgee, Aug 16 '13 at 23:52
Then why don't you use the moustache.load method in the begining of the page ? — tusharmath, Aug 16 '13 at 23:53
Wait what? I'm not sure how to do that. Sorry, I'm still new to all this stuff. — dtgee, Aug 16 '13 at 23:54
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/35632/discussion-between-tushar-and-dtgee) — tusharmath, Aug 16 '13 at 23:54

tusharmath · Answer 1 · 2013-08-17T00:33:17.533

The problem is that the UI manipulation and JS operations all run in the same thread. So to solve this problem you should just use a setTimeout function so that the JS operations are queued at the end of all UI operations. You can also pass a parameter for the timeinterval (around 4 ms) so that browsers with a slower JS engine can also perform smoothly.

       ... 

var i = 0;
var timer = setInterval(function() {

    var tweet = jsonTweets[i++];
    var optional_id = '_user_tweets';
    $('#all-user-tweets').mustache('tweets_tweet', {
        tweet: tweet,
        optional_id: optional_id
    });
    configureTweetSentiment(tweet);
    configureTweetView(tweet);

    if(i === jsonTweets.length){
        clearInterval(timer);
    }
}, 4); //Interval between loading tweets
        ...

NOTE
The solution is based on the following assumptions -

You are manipulating the dom with the configureTweetSentiment and the configureTweetView methods.

Ideally the solution provided above would not be the best solution. Instead you should create all html elements first in javascript only and at the end append the final html string to a div. You would see a drastic change in performance (Seriously!)
You don't want to use web workers because they are not supported in old browsers. If that's not the case and you are not manipulating the dom with the configure methods then web workers are the way to go for data intensive operations.

So I think I've tried this solution, but the same tweets were being loaded — dtgee, Aug 16 '13 at 23:59
That's because your code has an error. ```var tweet = jsonTweets[i];``` should come inside the loop. — tusharmath, Aug 17 '13 at 00:02
Okay sorry I actually changed that already. Umm but actually the problem was that the tweets still didn't publish one at a time. The code didn't seem to do anything.. unless I added it wrong — dtgee, Aug 17 '13 at 00:05

How to structure my code to return a callback?

1 Answers1