JavaScript でループをゆっくり回す

一気に処理させたくない Ajax 通信だとか、デバッグのために処理中の様子を眺める必要がある時とかに使えるかと。

setTimeout に for ループの Index を渡してやれば、簡単に実装できる。

// 1つの関数をゆっくり繰り返す
function loopSlowly(func, loop, interval) {
  for(let i = 0; i < loop; i++) {
    setTimeout(func, i * interval);
  }
}

// ループさせたい処理を用意する
const exampleFunc = () => {
  const elem = document.createElement('p');
  elem.innerHTML = 'Example';
  document.body.appendChild(elem);
};

// 1秒ごとに5回繰り返す
loopSlowly(exampleFunc, 5, 1000);

このコードは、「Example」と書かれた p 要素を1秒おきに追加していく。

また、1回ごとに違う処理を呼びたいなら、以下のように作ってやる。

// 関数の配列をゆっくり実行する
function loopSlowly2(funcArray, interval) {
  funcArray.forEach((func, i) => {
    setTimeout(func, i * interval);
  });
}

// 処理したい関数を配列化する
const funcArray = [
  () => { console.log('Start'); },
  () => { console.log(1); },
  () => { console.log(2); },
  () => { console.log(3); },
  () => { console.log('End'); }
];

// 1秒ごとに関数を順次実行する
loopSlowly2(funcArray, 1000);