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');

Arun P Johny · Accepted Answer · 2013-05-02 06:49:06Z

2

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

answered May 2, 2013 at 6:49

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paul Over a year ago

The key to understanding the execution of this code is to realize that counter() returns immediately after executing loop only once. loop(), defined inside counter, is called in the browser's event loop on a 1 sec interval. After it runs through n loops it will call the callback.

NiRUS Over a year ago

thank you Arun , but what if i want to display the counter only in the beginning and display questions repeatedly after some time delay...

Collectives™ on Stack Overflow

Javascript sequential execution

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related