setInterval【インターバル 設定】・clearInterval【インターバル 解除】
setTimeout【タイムアウト 設定】・clearTimeout【タイムアウト 解除】

setInterval【インターバル 設定】
clearInterval【インターバル 解除】

メモ

概要

  • インターバルの設定・解除

関連

外部リンク

構文

[window.]setInterval (handler [, timeout = 0 [, ...arguments ]])
[window.]setInterval (code [, timeout ])

 (long)インターバルタイマー識別子
handlerインターバル関数
codeインターバル関数コード文字列
timeoutインターバル時間 (ミリ秒単位 / 0：即時呼び出し)
argumentsインターバル関数の引数

// インターバル関数
interval ( [...arguments ] )
なし

[window.]clearInterval(id)

なし
idインターバルタイマー識別子

例

<p>
<button id="start1" type="button" onclick="startInterval();">5 秒毎にカウントアップ</button>
<button id="stop1" type="button" onclick="stopInterval();" disabled>解除</button>
<input id="count" readonly style="width:50px;">
<input id="param" readonly style="width:100px;">
</p>

<script>
let interval;  // インターバルタイマー識別子
let counter;

function startInterval() {
  document.getElementById("start1").disabled = true;
  document.getElementById("stop1").disabled = false;
  counter = 0;
  document.getElementById("count").value = counter;
  interval = setInterval(funcInterval, (5 * 1000), "P1", "P2", "P3");
}

function funcInterval(p1, p2, p3) {
  document.getElementById("count").value = ++counter;
  document.getElementById("param").value = "(" + p1 + ", " + p2 + ", " + p3 + ")";
}

function stopInterval() {
  clearInterval(interval);
  document.getElementById("start1").disabled = false;
  document.getElementById("stop1").disabled = true;
  document.getElementById("param").value = "";
}
</script>

setTimeout【タイムアウト 設定】
clearTimeout【タイムアウト 解除】

メモ

概要

  • タイムアウトの設定・解除
    • 明確な仕様なし
    • 指定タイムアウト時間 (ミリ秒) 経過後に一度だけタイムアウト関数呼び出し
    • clearInterval【インターバル 解除】でも解除可

関連

外部リンク

構文

[window.]setTimeout (handler [, timeout = 0 [, ...arguments ]])
[window.]setTimeout (code [, timeout ])

 (long)タイマー識別子
handlerタイムアウト関数
codeタイムアウト関数コード文字列
timeoutタイムアウト時間 (ミリ秒単位 / 0：即時呼び出し)
argumentsタイムアウト関数の引数

// タイムアウト関数
timeout ( [...arguments ] )
なし

[window.]clearTimeout(id)

なし
idタイマー識別子

例

<p>
<button id="start2" type="button" onclick="startTimeout();">5 秒後にダイアログ表示</button>
<button id="stop2" type="button" onclick="stopTimeout();" disabled>解除</button>
</p>

<script>
let timeout;  // タイマー識別子

function startTimeout() {
  document.getElementById("start2").disabled = true;
  document.getElementById("stop2").disabled = false;
  timeout = setTimeout(funcTimeout, (5 * 1000), "P1", "P2", "P3");
}

function funcTimeout(p1, p2, p3) {
  alert("タイムアウト (" + p1 + ", " + p2 + ", " + p3 + ")");
  document.getElementById("start2").disabled = false;
  document.getElementById("stop2").disabled = true;
}

function stopTimeout() {
  clearTimeout(timeout);
  document.getElementById("start2").disabled = false;
  document.getElementById("stop2").disabled = true;
  alert("解除");
}
</script>