JS timeout not firing

Just can't seem to figure this out, how to prevent the outer loop continuing until the inner loop has executed using setTimeout:

    function $(s) { return document.getElementById(s); }
     var i = 0;
     for (i=0; i<6; i++){
         $('t'+i).className = 'show';
         cl('t'+i);
         for (var j=0; j<50; j++){
             cl('b'+i+'='+j+'%');
             setTimeout(function(){ $('b'+i).style.width = j+'%';},200);
         }
     }
 

This little bit of code is supposed to first make elements t0 visible, and then set the width of another element b0 in 1% steps with a time interval of 200ms, and then continue with t1,b1, t2,b2 etc etc.

But there's no 200ms delay, the whole code executes immediately.

---