Последовательное выполнение Javascript

Question

привет, я не могу получить javascript, выполняемый последовательно. Как происходят события. Даже если заявления помещаются последовательное выполнение сумасшедший ..

мне нужны цифры обратного отсчета от 6..to..0 затем отобразить случайную строку в Div тег

JSfiddleLink

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

Это следует за асинхронным шаблоном выполнения, потому что вы используете setTimeout.

Решение здесь заключается в использовании обратного вызова, который будет вызываться после завершения обратного отсчета и использования обратного вызова для отображения текста.

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

Демо: Fiddle