JavaScript 顺序执行

Question

嗨，我无法让 javascript 按顺序执行。事件是如何触发的。即使语句是按顺序放置的，执行起来也是疯狂的..

我需要从 6.. 到 ..0 的倒计时数字，然后在 Div 标签中显示随机字符串

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

它遵循异步执行模式，因为您正在使用 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