タイマー機能とコードの順番について

Question

２秒おきに配列のデータを並び替えたいのですが、まず先頭を削除し、そのデータを末尾に挿入したいのですが
一番最初にforEachメソッドで配列のデータをHTML要素に挿入し、その後で、タイマー機能で処理と間隔をセットしたのですが動かず、(3)のコードを最初に書いて続けて０>１>２と書いて残りを順番に書けば動くのですが、今あるコードがなぜだめなのかわかりません。
回答よろしくお願いします。

            <div id="item0" class="item"></div>
			<div id="item1" class="item"></div>
			<div id="item2" class="item"></div>
			<div id="item3" class="item"></div>
			<div id="item4" class="item"></div>
			<div id="item5" class="item"></div>

<script>
let stock = ['A', 'B', 'C', 'D', 'E', 'F'];
stock.forEach(function(data, index) {　　　　　　　　　　　　　//(０)
	const idName = 'item' + index;　　　　　　　　　　　　　　//(１)
	document.getElementById(idName).textContent = data;　//(２)
});
const intervalId = setInterval(function() {             //(3)
	
	const first = stock.shift();                     //(4)
	stock.push(first);                               //(5)
}, 2000);                                           //(6)
/script>                                       

Answer 1

ちょっと仰っていることを理解しきれていませんが、AからFの文字を表示しているdivの順番が入れ替わらないということですか？
配列 stock だけを操作していて、divの並べ替えの処理をしていないからではないでしょうか

Comments

[mercury8128]

回答ありがとうございます。コードの順番を変えれば動くのですがのデータを格納した後、
なぜこのままでは関数内の処理のshiftとpushメソッドの部分が動かないのかがわかりません。

[thyda.eiqau]

stockの順番は変わっていますよ。(5)と(6)の間に console.log(stock); を入れてみてください。
divの順番を変える処理を書いていないので、divは動きません

Answer 2

２秒おきに配列のデータを並び替えたい

こういう表を想像してみてください。

      0sec          2sec
時間 |------------>|------------> setInterval(function(){
     1) 並び替え    1) 並び替え     : (配列入れ替え:実装済み)
     2) 表示変更    2) 表示変更     : (未実装：外部で1回)
                                  }, 2[sec])

ご質問のコードにある stock.forEach() は 表示変更 に該当します。
初期値を表示後も、繰り返し実行する必要があります。

表示変更 部分を関数化するのはどうでしょう？

追記）

(3)のコードを最初に書いて続けて０>１>２と書いて残りを順番に書けば動く

次のような内容になるので、動くのです。

      0sec          2sec
時間 |------------>|------------> setInterval(function(){
     1) 表示変更    1) 表示変更     : (実装済み)
     2) 並び替え    2) 並び替え     : (実装済み)
                                  }, 2[sec])

Answer 3

idで指定しないといけないのでしょうか？

Comments

[yambejp]

<script>
let stock = ['A', 'B', 'C', 'D', 'E', 'F'];
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('.item').forEach((x,y)=>x.textContent=stock[y]);
setInterval(()=>{
var items=document.querySelector('#items');
items.appendChild(items.firstChild);
},2000);
});
</script>
<div id="items">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>