等待while循環結束，然后再執行代碼

Question

我試圖從一個對象檢索數據，我從1-9生成3個隨機數，然后使用這些隨機數從json對象中選取數據。 但是有時它起作用，有時卻不起作用，我認為這可能是因為它不等待從對象中選擇數據之前就生成隨機數，而這一切都是在頁面加載時發生的：

jsfiddle： http : //jsfiddle.net/dbqw79j4/1/

編碼：

var jsonfile =[      
        {
        "id" : "article1",
        "image" : "http://images.domain.com/is/image/boss/BOSS_london_bridge_skyline?$c_overview_large$",
        "headline" : "<h2>EIN TAG IN LONDON<span class='h2'>MIT LEWIS HAMILTON</span></h2>"
        },
        {
        "id" : "article2",
        "image" : "http://images.domain.com/is/image/boss/FAB_5819?$c_overview_large$",
       "headline" : "<h2>EIN TAG IN MONACO<span class='h2'>MIT NICO ROSBERG</span></h2>"
        },
  ...
]

var arr = []
var article1;
var article2;
var article3;

var art1hd;
var art1img;

var art2hd;
var art2img;

var art3hd;
var art3img;


while(arr.length < 3){
  var randomnumber=Math.ceil(Math.random()*9)
  var found=false;
  for(var i=0;i<arr.length;i++){
    if(arr[i]==randomnumber){found=true;break}
  }
  if(!found)arr[arr.length]=randomnumber;
}
console.log(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);


article1 = arr[0];
article2 = arr[1];
article3 = arr[2];

console.log(article1)
console.log(article2)
console.log(article3)


art1hd = jsonfile[article1]['headline'];
art1img = jsonfile[article1]['image'];

art2hd = jsonfile[article2]['headline'];
art2img = jsonfile[article2]['image'];

art3hd = jsonfile[article3]['headline'];
art3img = jsonfile[article3]['image'];

console.log(art1hd)
console.log(art1img)

console.log(art2hd)
console.log(art2img)

console.log(art3hd)
console.log(art3img)

Answer 1

您從0-9范圍內生成隨機數，並且數組僅包含9個元素，並且從0-8進行索引

您應該使用：

while(arr.length < 3){
  var randomnumber=Math.ceil(Math.random()*8)
  var found=false;
  for(var i=0;i<arr.length;i++){
    if(arr[i]==randomnumber){found=true;break}
  }
  if(!found)arr[arr.length]=randomnumber;
}

Answer 2

問題是，您的“ jsonfile”數組具有九個元素。 這會在您生成隨機數9時中斷，因為數組是從零開始的，因此索引數組的有效值為0-8

Answer 3

Math.ceil()永遠不是正確的函數，無法根據Math.random()乘以以下代碼來生成整數結果：

var randomnumber = Math.ceil( Math.random() * 9 );

您應該始終在這樣的代碼中使用Math.floor() 。 如果您不希望范圍以0開頭，則在執行Math.floor()之后添加范圍基礎。

換句話說，如果您想要一個介於1到9之間的隨機整數，這是正確的方法：

var randomnumber = Math.floor( Math.random() * 9 ) + 1;

為什么是這樣？ 重要的是要了解Math.random()產生一個大於或等於 0且小於（但永遠不等於）1的值。

因此Math.random() * 9給出的值始終小於9（並且永遠不等於9）。 如果對此使用Math.floor() ，則現在將有一個介於0到8（含）之間的整數。

加上1，則您需要的范圍是1到9。

許多JavaScript參考都無法清楚地描述Math.random() 。 請記住，其結果在0 <= Math.random() < 1的范圍內。

因此，如果您使用Math.ceil() ，可能會出錯嗎？ 回到原始示例：

var randomnumber = Math.ceil( Math.random() * 9 );

該代碼實際執行的操作是生成一個介於0到9之間的數字，而不是1到9。現在得到0結果的機會非常小： Math.random()返回0的情況很少，但是可能發生 。 通過使用Math.floor()代替，可以確保結果始終在所需范圍內。

就是說，正如suvroc指出的那樣，您（最終）將使用此值作為9個元素的數組的索引，因此，所需的范圍實際上是0到8。因此代碼應為：

var randomnumber = Math.floor( Math.random() * 9 );

Answer 4

這是因為隨機數生成器可以生成數字9，但是您的jsonfile只有9個元素，所以最后一個索引是8。

Answer 5

首先，正如其他人所說，隨機數生成為：

Math.floor(Math.random()*9)

然后，我檢查了代碼以確保同步性： http : //jsfiddle.net/dbqw79j4/6/

我做了一個遞歸函數，它調用arr.length >= 3上的日志，如果arr不存在則添加一個隨機數。