【javascript】配列の中のひとつの文字だけを1秒ごとに順番に表示させたい

Question

下記のようなスクリプトがあります。
配列の中身を表示するスクリプトです。
配列は　111 222 333 です。

このスクリプトでは結果として
1秒後に
111

2秒後に
111
222

3秒後に
111
222
333

と表示することが可能です。

<script>
function a(n, timeout) {
  return function() {
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        console.log(n);
        resolve(n);
      }, 1000);
    });
  };
}

var processes = [
  a(111, 3000),
  a(222, 2000),
  a(333, 1000)
];

processes.reduce(function(prev, curr, index, array) {
  return prev.then(curr);
}, Promise.resolve());
</script>

<script>
console.log = function (log) {
document.getElementById('console_log').innerHTML += log + "<br>";
}
</script>
<div id="console_log"></div>

やりたいこと

1秒後に
111

2秒後に
222

3秒後に
333

と、最新の配列部分のみを表示させたいです。

書き方がわかりません。

ご教示いただきたくお願いいたします。

Answer 1

setIntervalで十分な命題だと思います

Comments

[tajix_japan]

有難うございます。
下記のSetintervalでできました。
有難うございました。

<script>
var data2 = [11, 12, 13, 14, 15, 16,17, 18, 19], step2 = 0, count = 0;

var fn = function() {
document.getElementById("b").textContent = data2[step2];
step2++;
if (step2 >= data2.length) {

}
if(i > 5) clearInterval(id);
i++;
}
var tm = 1000;
var i = 1;
var id = setInterval(fn,tm);
</script>
<div id="b"></div>