Need to find more efficient solution to writing blank spaces to page

Question

I am putting together a page displaying a user's tweets whilst visualising the amount of time in between in the way of blank spaces. Three blank space represent one second of inactivity between tweets. Confusing, I know. You can see from my code – http://jsfiddle.net/k5234/2/ – that I have written the individual  s into a for loop, but this is proving to be a very inefficient way of programming the page (as you can tell from the load speed!)

Does anyone have any suggestions as to how I can structure the JS better to make page loads quicker whilst keeping the same functionality.

Thanks, Dalogi

Answer 1

Sounds like a job for css padding/margins. No looping needed, just figure out how many px/ems it is for each second and you have a gap.

Eric

Answer 2

Instead of blank spaces, use CSS margin/padding/whatever to space the items and calculate the relevant values based on the time between tweets. No more page bloat with  s

Answer 3

The best way would be to use CSS to pad-out the items. Just use tweetGap as a multiplier and use it to generate the number of pixels padding your require.

If, for some weird reason, you can do this and most of your cases are, say, less than 20 spaces then it would probably be more efficient to build an array and "index" into it using the tweetGap variable. Something like:

    var s=new Array();
    s[0]="";
    s[1]=" ";
    s[2]="  ";
    s[3]="   ";
    s[4]="    ";

    // etc

if (tweetGap < 20) {
  html+= s[tweetGap];
}
else {
 // forloop
}

Horrible code, but probably faster than a loop. But really CSS is the way to go.

Answer 4

I agree with the other answers, but if you do need to use spaces:

function spaces(count) {
    var return_ = '';
    for(var i=0;i<count+1;i++) return_ += "&nbsp;";
    return return_;
}
document.write(spaces(10)); // ten spaces...

But really, padding/margin is the way to go:

/* CSS */
.spaces.five { margin-left: 3px; }
.spaces.ten { margin-left: 6px; }
[...]
<!-- HTML -->
blablablabla<span class='spaces five' />blablalabla

Answer 5

how about this

String.prototype.times = function(n) {
    return Array.prototype.join.call({length:n+1}, this);
};


"&nbsp".times(5);

WORKING DEMO

Answer 6

This is a solution I created that works instantly.

http://jsfiddle.net/k5234/4/

$(document).ready(function(){

    $('#target').submit(function() {

        var html = "";
        var url = "http://api.twitter.com/1/statuses/user_timeline.json?&callback=?&screen_name=dalogi&count=5";    

        $.getJSON(url, function(data) {

            // Retrieving tweets
            function getTweets() {
        $.each(data, function(i, item) {
            var timeCreated = new Date(item.created_at); // date of tweet
            if ( (i+1) in data)  {
                var timeTillNextTweet = new Date( data[ i+1 ].created_at);
                var timeDiff = timeCreated.getTime() - timeTillNextTweet.getTime();
                var secondsDifference = Math.floor(timeDiff/1000);
                var tweetGap = secondsDifference * 3; // Based on 3 characters per second

                html += "<p style=\"margin-bottom: " + tweetGap + "em;\">" + item.text + "</p>";    
            } else { 
                html += "<p>" + item.text + "</p>";
            };
        });
            }

            getTweets();
            $('#userTweets').append(html);    
        });
        return false    
    });
});