授業に戻る

1秒ごとに表示する

重要度: 5

printNumbers(from, to)関数を書いて、fromからtoまで1秒ごとに1つの数値を出力します。

2つのバージョンのソリューションを作成します。

  1. setIntervalを使用する場合。
  2. ネストしたsetTimeoutを使用する場合。

setIntervalを使用する場合

function printNumbers(from, to) {
  let current = from;

  let timerId = setInterval(function() {
    alert(current);
    if (current == to) {
      clearInterval(timerId);
    }
    current++;
  }, 1000);
}

// usage:
printNumbers(5, 10);

ネストしたsetTimeoutを使用する場合

function printNumbers(from, to) {
  let current = from;

  setTimeout(function go() {
    alert(current);
    if (current < to) {
      setTimeout(go, 1000);
    }
    current++;
  }, 1000);
}

// usage:
printNumbers(5, 10);

どちらのソリューションでも、最初の出力が表示されるまでに最初の遅延が発生することに注意してください。この関数は、最初の1000ms後に呼び出されます。

関数がすぐに実行されるようにしたい場合は、次のように別の行に追加の呼び出しを追加できます

function printNumbers(from, to) {
  let current = from;

  function go() {
    alert(current);
    if (current == to) {
      clearInterval(timerId);
    }
    current++;
  }

  go();
  let timerId = setInterval(go, 1000);
}

printNumbers(5, 10);