Question

嗨我无法按顺序执行javascript。这些事件是如何被解雇的。即使语句按顺序放置，执行也很疯狂..

我需要6..to..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

Javascript顺序执行

1 个答案: