JavaScript入門 | ブラウザオブジェクトモデル | タイマー

Tags:

タイマー

windowオブジェクトは、一定時間が経過した後に関数を呼び出せるように、次のメソッドを提供する。

  1. setTimeout()
  2. setInterval()

また、このように設定された関数の呼び出しを取り消せるように、次のメソッドを提供する。

  1. clearTimeout()
  2. clearInterval()

setTimeout()メソッド

setTimeout()メソッドは、指定された時間が経過した後に指定された関数を呼び出す。

構文

window.setTimeout(呼び出す関数, 遅延時間);

このメソッドが正常に呼び出されると、設定されたtimeoutIDを返す。 このメソッドでは、遅延時間をミリ秒単位で設定できる。

function startTimeout() {
    setTimeout(printCurrentDate, 2000);
}
function printCurrentDate() {
    document.getElementById("date").innerHTML = new Date();
}

setInterval()メソッド

setInterval()メソッドは、指定された時間間隔ごとに指定された関数を繰り返し呼び出す。

構文

window.setInterval(呼び出す関数, 遅延時間);

このメソッドが正常に呼び出されると、設定されたtimeoutIDを返す。 このメソッドでは、時間間隔をミリ秒単位で設定できる。

構文

function startInterval() {
    setInterval(printCurrentDate, 2000);
}
function printCurrentDate() {
    document.getElementById("date").innerHTML += new Date() + "<br>";
}

clearTimeout()メソッド

setTimeout()メソッドの戻り値をclearTimeout()メソッドの引数として渡すと、予定された関数の呼び出しを取り消せる。

構文

window.clearTimeout(timeoutID);

このメソッドは、setTimeout()メソッドによって関数が呼び出される前に実行しなければ、呼び出しを取り消せない。 関数が呼び出された後にこのメソッドを呼び出しても、何も動作しない。

var timeoutId;
function startTimeout() {
    timeoutId = setTimeout(printCurrentDate, 2000);
}
function cancelTimeout() {
    clearTimeout(timeoutId);
}
function printCurrentDate() {
    document.getElementById("date").innerHTML += new Date() + "<br>";
}

clearInterval()メソッド

setInterval()メソッドの戻り値をclearInterval()メソッドの引数として渡すと、繰り返される関数の呼び出しを取り消せる。

構文

window.clearInterval(timeoutID);

var timeoutId;
function startInterval() {
    timeoutId = setInterval(printCurrentDate, 2000);
}
function cancelInterval() {
    clearInterval(timeoutId);
}
function printCurrentDate() {
    document.getElementById("date").innerHTML += new Date() + "<br>";
}