Javascript循環顯示元素時通過數組

我想創建一個'隨機選擇器'行爲，其中函數遍歷數組一段時間（例如：3秒，5秒），同時快速顯示所有數組元素迭代直到迭代結束。試想一個接一個地看到標籤中顯示的所有元素，直到它最終停止在一個元素上。Javascript循環顯示元素時通過數組

我迄今爲止代碼：

var places = ["Curry Leaf", "Subway", "Burger King"]; 

function execute_randomizer() { 
    var place_label = document.getElementById("place_label"); 
    for (var i = 0; i < 100; i++) { 
     var selected_place = places[Math.floor(Math.random() * places.length)]; 
     setTimeout(function() { 
      place_label.innerText = selected_place; 
     }, 400); 
    } 
}

這貫穿迭代，當循環完成顯示的元素，但它不會在每個迭代的元素。我怎樣才能修改這個？

編輯

即使有3個元素，動畫必須直到時間結束

來源

2017-08-04 Dinuka

看看[這]（https://stackoverflow.com/a/45500721/5989584）非常類似的問題。 – PeterMader

你for完成了setTimeout運行之前迭代通過數組重新迭代，則函數傳遞給setTimeout使用最後一個值selected_place運行100次。

瞭解這種行爲在setTimeout in for-loop does not print consecutive values

，我注意到的是，您的setTimeout將400毫秒後觸發，因爲for環將在大約1毫秒完成的另一個問題，傳遞給setTimeout功能將觸發100一次又一次地在中間沒有任何延遲，爲此，我將setTimeout的延遲參數從400更換爲400 * i。

var places = ["Curry Leaf", "Subway", "Burger King"];  
 
function execute_randomizer() { 
 
    var place_label = document.getElementById("place_label"); 
 
    for (var i = 0; i < 100; i++) { 
 
     var selected_place = places[Math.floor(Math.random() * places.length)]; 
 
     (function(selected_place){ 
 
      setTimeout(function() { 
 
       place_label.innerText = selected_place; 
 
      }, 400 * i); 
 
     })(selected_place); 
 
    } 
 
} 
 
execute_randomizer();

<span id="place_label"></span>

來源

2017-08-04 08:30:12

這有效，但它看起來非常糟糕。無論如何，使它更平滑？如果你知道我的意思 – Dinuka

@RickGrimesTheCoder我不知道我是否知道你的意思，但是如果你使用jQuery，你可以使用一些過渡動畫來使文本替換更少「突然」 –

你可以使用一個封閉在價值和不同的時間爲每個超時。

var places = ["Curry Leaf", "Subway", "Burger King"]; 
 

 
function execute_randomizer() { 
 
    var place_label = document.getElementById("place_label"); 
 
    for (var i = 0; i < 10; i++) { 
 
     var selected_place = places[Math.floor(Math.random() * places.length)]; 
 
     setTimeout(function (value) { 
 
      return function() { 
 
       place_label.innerText = value; 
 
      }; 
 
     }(selected_place), i * 100); 
 
    } 
 
} 
 

 
execute_randomizer();

<div id="place_label"></div>

對於通過第一次運行時，您可以顯示每個元素，然後採取隨機元素的最後一個值。

function execute_randomizer() { 
 
    function cb (value) { 
 
     return function() { 
 
      place_label.innerText = value; 
 
     }; 
 
    } 
 

 
    var place_label = document.getElementById("place_label"); 
 

 
    place_label.innerText = ''; 
 
    for (var i = 0; i < places.length; i++) { 
 
     setTimeout(cb(places[i]), 200 + i * 200); 
 
    } 
 
    setTimeout(cb(places[Math.floor(Math.random() * places.length)]), 200 + places.length * 200); 
 
} 
 

 
var places = ["Curry Leaf", "Subway", "Burger King"]; 
 

 
execute_randomizer();

<div id="place_label"></div>

來源

2017-08-04 08:30:36

我怎樣才能擺脫那種毛病？ – Dinuka

只需少量元素。 –

，因爲現在你在循環的同時去100次，也許一毫秒和改變文本的順序100但再次你應該改變你的循環。所以更好的是等待400 ms超時，然後進行下一次迭代。請記住超時是異步。

來源

2017-08-04 08:32:37 hsd

我認爲這可能會更好，如果你把整個功能超時。（我不確定，沒有測試，但這就是我會嘗試的）。

我的意思是，你只是建立一個函數，創建你的隨機數並填寫你的領域。之後，你再次調用相同的函數超時+保持一個計數器，你傳遞參數。

我的意思下面的例子：（沒有測試）

var places = ["Curry Leaf", "Subway", "Burger King"]; 

execute_randomizer(0); /* Start for the first time */ 

function execute_randomizer(times) { 
    if(times == 100) 
     return; /* stop execution */ 

    var place_label = document.getElementById("place_label"); 
    var selected_place = places[Math.floor(Math.random() * places.length)]; 
    place_label.innerText = selected_place; 
    setTimeout(function() { 
     execute_randomizer(times+1) 
    }, 400); 
}

來源

2017-08-04 08:33:23 Dennis

Javascript循環顯示元素時通過數組

回答

相關問題