Javascript順序執行

嗨，我無法獲得按順序執行的JavaScript。事件如何發生。雖然語句放置順序執行是瘋了..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');

顯示的隨機字符串

來源

2013-05-02 Nirus

它遵循異步執行模式，因爲您使用的是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

來源

2013-05-02 06:49:06

理解這個代碼的執行，關鍵是要認識到，計數器（）執行循環一次後立即返回。在計數器內定義的loop（）在瀏覽器的事件循環中以1秒的間隔被調用。通過n循環運行後，它會調用回調函數。 – Paul 2013-05-02 06:57:08

謝謝Arun，但是如果我只想在一開始就顯示計數器並在延遲一段時間後反覆顯示問題會怎樣... – Nirus 2013-05-02 07:22:20

Javascript順序執行

回答

相關問題