Javascript sequential execution

Question

hi i am unable to get the javascript executed sequentially. How are the events fired. Even though statements are placed sequential the execution is crazy..

I need the countdown numbers from 6..to..0 then display the random string in the Div tag

JSfiddle Link

 function getRandomArbitrary(min, max) {     //function to pick question randomly based on math calculations
    var temp = Math.floor(Math.random() * (max - min) + min)

  return (temp > max) ? getRandomArbitrary(min,max): temp;
};

function questions(){       //returns the Question pattern

    var htmlQ = new Array("Canon","Mysql","Cisco","FaceBook","Vimeo","Yahoo","Sony","Ebay","Google","HP","Microsoft","Dell","EAGames","Digg","Adobe");
    var DispatchPattern;
switch(getRandomArbitrary(1,10))
    {
        case 1:
            {
           DispatchPattern = htmlQ[getRandomArbitrary(0, 15)]+' - '+htmlQ[getRandomArbitrary(0, 15)]+' - '+htmlQ[getRandomArbitrary(0, 15)];   
break;
            }
        case 2:
            {

           DispatchPattern = htmlQ[getRandomArbitrary(0, 15)]+' - '+htmlQ[getRandomArbitrary(0, 15)]+' - '+htmlQ[getRandomArbitrary(0, 15)];  
break;
            }
        case 3:
            {
           DispatchPattern = htmlQ[getRandomArbitrary(0, 15)]+' - '+htmlQ[getRandomArbitrary(0, 15)]+' - '+htmlQ[getRandomArbitrary(0, 15)];  
break;
            }
        case 4:
            {
           DispatchPattern = htmlQ[getRandomArbitrary(0, 15)]+' - '+htmlQ[getRandomArbitrary(0, 15)]+' - '+htmlQ[getRandomArbitrary(0, 15)];        
break;
            }
        case 5:
            {
           DispatchPattern = htmlQ[getRandomArbitrary(0, 15)]+' - '+htmlQ[getRandomArbitrary(0, 15)]+' - '+htmlQ[getRandomArbitrary(0, 15)];   
break;
            }
        case 6:
            {
           DispatchPattern = htmlQ[getRandomArbitrary(0, 15)]+' - '+htmlQ[getRandomArbitrary(0, 15)]+' - '+htmlQ[getRandomArbitrary(0, 15)];  
break;
            }
        case 7:
            {
           DispatchPattern = htmlQ[getRandomArbitrary(0, 15)]+' - '+htmlQ[getRandomArbitrary(0, 15)]+' - '+htmlQ[getRandomArbitrary(0, 15)];  
 break;
            }

        case 8:
            {
           DispatchPattern = htmlQ[getRandomArbitrary(0, 15)]+' - '+htmlQ[getRandomArbitrary(0, 15)]+' - '+htmlQ[getRandomArbitrary(0, 15)];
break;
            }
        case 9:
            {
           DispatchPattern = htmlQ[getRandomArbitrary(0, 15)]+' - '+htmlQ[getRandomArbitrary(0, 15)]+' - '+htmlQ[getRandomArbitrary(0, 15)];
break;
            }
        case 10:
            {
           DispatchPattern = htmlQ[getRandomArbitrary(0, 15)]+' - '+htmlQ[getRandomArbitrary(0, 15)]+' - '+htmlQ[getRandomArbitrary(0, 15)];    
          break;
            }
        default: 
            {
            alert("Some Error occured");
            DispatchPattern = 'Biscuit!!!';
            break;
            }
}
    //alert("text: "+DispatchPattern);
return DispatchPattern;
}


function counter($el, n) {
                (function loop() {
                     $el.html(n);
                     if (n--)   {
                                setTimeout(loop, 1000);
                                          }
                     })();
                }


//Sequential execution (i need the count down first then the strings to be displayed in div tag)
$("div").html(counter($("div"), 6)).fadeIn('slow'); $("div").html(questions()).fadeIn('slow');

Answer 1

It follows an asynchronous execution pattern because you are using setTimeout.

The solution here is to use a callback, which will be called once the countdown is completed and use the callback to display the text.

function counter($el, n, callback) {
    (function loop() {
        $el.html(n);
        if (n--)   {
            setTimeout(loop, 1000);
        } else {
            callback();
        }
    })();
}


//Sequential execution (i need the count down first then the strings)
$("div").html(counter($("div"), 6, function(){
    $("div").html(questions()).fadeIn('slow');
})).fadeIn('slow');

Demo: Fiddle