JavaScript – Timer

1 概要
2 Dateオブジェクト
3 setInterval()
4 setTimeout()

概要

JavaScriptのタイマ関連の実装。

Dateオブジェクトによる経過時間の計測
setInterval()による等時間間隔の起動
setTomeout()による等時間間隔の実行キュー登録

Dateオブジェクト

Dateオブジェクトのミリ秒単位の値を用いる方法。

DateオブジェクトのvalueOf()メソッドでミリ秒単位の現在時刻を取得し、これを用いて時間を判定する。これに続く処理を純粋に遅延させることになる。

var endTime = ( new Date() ).valueOf() + 3000;

console.log( "start" );

while ( ( new Date() ).valueOf() < endTime );

console.log( "end" );

var endTime = ( new Date() ).valueOf() + 3000;

console.log( "start" );

while ( ( new Date() ).valueOf() < endTime );

console.log( "end" );

なお、valueOf()メソッドの代わりに、+newオペレータを用いることができる。

var endTime = +new Date() + 3000

1	var endTime = +new Date() + 3000

setInterval()

起動

指定した時間間隔で関数を呼び出す。他の処理とは無関係に呼び出されるため、関数の処理内容が重い場合には、処理が終わる前に呼び出されてしまうことがある。

setInterval()関数の第1引数に繰り返し実行したい関数を、第2引数に繰り返し間隔をミリ秒単位の数値で指定。関数の指定方法としては、以下の3通り。

文字列で記述	関数名を文字列として記述。その際、関数の後の()も付けて記述
直接記述	関数名をクォート／ダブルクォートで囲まず直接記述。関数の後ろの()はつけない
無名関数を使って記述	function(){}の中にターゲットとなる関数を記述

# 文字列で関数名を記述する例
setInterval( "animation()";

# 関数名を直接記述する例
setInterval( animation, 1000 ); 1000 );

# 無名関数を使った例
setInterval( function() { animation(); }, 1000 );

# 文字列で関数名を記述する例

setInterval( "animation()";

# 関数名を直接記述する例

setInterval( animation, 1000 ); 1000 );

# 無名関数を使った例

setInterval( function() { animation(); }, 1000 );

引数がある場合

繰り返し実行する関数が引数を持つ場合、文字列で引数を記述するか、無名関数を使って記述する。

var char0 = '□';
var char1 = '■';

# 文字列で記述する例
setInterval( "animation( char0, char1 )", 1000 );

# 無名関数を使う例
setInterval( function() { animation( char0, char1 ); }, 1000 );

var char0 = '□';

var char1 = '■';

# 文字列で記述する例

setInterval( "animation( char0, char1 )", 1000 );

# 無名関数を使う例

setInterval( function() { animation( char0, char1 ); }, 1000 );

停止

タイマーの起動と停止を制御するには、起動時にsetInterval()を変数で参照し、そのオブジェクトに対してclearInterval()で停止をかける。

<input type="button" id="id_button" value="start/stop" onclick="startAndStop()">
<p id="id_target"></p>

<script>
<!--

var target = document.getElementById( "id_target" );
var char0 = '□';
var char1 = '■';
var isRunning = false;
var flag = 0;
var timer;

function startAndStop() {
  if ( isRunning ) {
    clearInterval( timer );
    isRunning = false;
  } else {
    timer = setInterval( "animation( char0, char1 )", 1000 );
    isRunning = true;
  }
}

function animation( ch0, ch1 ) {
  if ( flag == 0 ) {
    target.innerHTML = ch0;
    flag = 1;
  } else {
    target.innerHTML = ch1;
    flag = 0;
  }
}

//-->
</script>

<!--

var target = document.getElementById( "id_target" );

var char0 = '□';

var char1 = '■';

var isRunning = false;

var flag = 0;

var timer;

function startAndStop() {

if ( isRunning ) {

clearInterval( timer );

isRunning = false;

} else {

timer = setInterval( "animation( char0, char1 )", 1000 );

isRunning = true;

}

function animation( ch0, ch1 ) {

if ( flag == 0 ) {

target.innerHTML = ch0;

flag = 1;

} else {

target.innerHTML = ch1;

flag = 0;

}

//-->

</script>

setTimeout()

基本形

setTimeout()の第1引数に実行したい関数を文字列で、第2引数に遅延時間をミリ秒で指定する。

console.log( "start" );

setTimeout( "main()", 3000 );

console.log( "end" );

function main() {
  console.log( "in main()" );
}

console.log( "start" );

setTimeout( "main()", 3000 );

console.log( "end" );

function main() {

console.log( "in main()" );

}

上記の例では、以下のように推移する。

“start”を表示
setTimeout()を実行→3秒後にmain()関数が呼び出されるよう指定
“end”を表示
約3秒後にmain()が実行され、”in main()”を表示

起動

関数を文字列とする方法

setTimeout( "main()", 3000 );
setTimeout( "main( 100 )", 3000 );
setTimeout( "main( arg )", 3000 );

setTimeout( "main()", 3000 );

setTimeout( "main( 100 )", 3000 );

setTimeout( "main( arg )", 3000 );

文字列で引数を分離する方法

setTimeout( "main(" + 100 + ")", 3000);
setTimeout( "main(" + arg + ")", 3000 );

1 2	setTimeout( "main(" + 100 + ")", 3000); setTimeout( "main(" + arg + ")", 3000 );

無名関数を使う方法

setTimeout( function() { main(); }, 3000 );
setTimeout( function() { main( 100 ); }, 3000 );
setTimeout( function() { main( arg ); }, 3000 );

setTimeout( function() { main(); }, 3000 );

setTimeout( function() { main( 100 ); }, 3000 );

setTimeout( function() { main( arg ); }, 3000 );

タイマとしての利用

等時間間隔で実行したい関数で、setTimeout()において再帰的に自己を呼び出すことによってタイマーとして利用できる。

counter( 10 );


function counter( n ) {
  if ( n == 0 ) {
    console.log( "count end" );
  } else {
    console.log( n );
    n--;
    timer = setTimeout( function() { counter( n ); }, 1000 );
  }
}

counter( 10 );

function counter( n ) {

if ( n == 0 ) {

console.log( "count end" );

} else {

console.log( n );

n--;

timer = setTimeout( function() { counter( n ); }, 1000 );

}

遅延時間後に実行キューに登録されることから、それぞれの関数の実行は重複することなく担保される。このため、setInterval()に比べて関数間の衝突は生じないが、実際の実行間隔は遅延時間より長くなる。

停止

setTimeout()はsetInterval()と同じくタイマーIDを返し、これに対してclearTimeout()を実行することでタイマーを停止できる。

var timer;

setTimeout( function() { stop(); }, 5000 );
counter( 10 );


function counter( n ) {
  if ( n == 0 ) {
    console.log( "count end" );
  } else {
    console.log( n );
    n--;
    timer = setTimeout( function() { counter( n ); }, 1000 );
  }
}


function stop() {
  clearTimeout( timer );
}

var timer;

setTimeout( function() { stop(); }, 5000 );

counter( 10 );

function counter( n ) {

if ( n == 0 ) {

console.log( "count end" );

} else {

console.log( n );

n--;

timer = setTimeout( function() { counter( n ); }, 1000 );

}

function stop() {

clearTimeout( timer );

}

上記の例では、タイマーを止めるstop()関数が5秒後に実行されるようにし、counter()を開始している。counter()自身がが終了する前にstop()が実行され、counter()は停止する。

補足

実行キュー

setTimeout()は、指定した関数を指定した遅延時間後に実行キューに登録する。このため、setTimeout()実行後に時間がかかる処理に移った場合、その処理中に遅延指定した関数がキューに登録され、処理実行後に関数が実行される。

var endTime = ( new Date() ).valueOf() + 5000;

console.log( "start" );

setTimeout( function() { hoo(); }, 3000 );

while ( ( new Date() ).valueOf() < endTime );

console.log( "end" );


function hoo() {
  console.log( "delay" );
}

var endTime = ( new Date() ).valueOf() + 5000;

console.log( "start" );

setTimeout( function() { hoo(); }, 3000 );

while ( ( new Date() ).valueOf() < endTime );

console.log( "end" );

function hoo() {

console.log( "delay" );

}

上記の例の場合、

setTimeout()が実行され、3秒の遅延時間のカウント開始
whileループに入る
3秒後、hoo()が実行キューに登録される
5秒後、whileループから抜ける
実行キューに登録されたhoo()が即時実行される

スタック・オーバーフローの回避

setTimeout()を用いるシーンの一つに、再帰定義のコールスタック・オーバーフローの回避がある。この場合、再帰呼び出しの度にsetTimeout()でラップし、待機時間をゼロとする。

setTimeout( 関数, 0 )；

1	setTimeout( 関数, 0 )；

これにより、関数はスタックではなく実行キューに並べられ、オーバーフローは発生しない。ただし、通常の再帰呼び出しに比べて大幅に実行時間が増加する。

たとえば以下の例では単純なループにかかる時間を測っており、

function countdown( n ) {
  if ( n == 0 ) {
    console.log( "end" );
  } else {
    n--;
    countdown( n );
  }
}


console.log( "start" );
console.time( "timer" );
countdown( 10000 );
console.timeEnd( "timer" );

// 実行結果
// start
// end
//timer: 10.000ms

function countdown( n ) {

if ( n == 0 ) {

console.log( "end" );

} else {

n--;

countdown( n );

}

console.log( "start" );

console.time( "timer" );

countdown( 10000 );

console.timeEnd( "timer" );

// 実行結果

// start

// end

//timer: 10.000ms

次の例では、再帰的にsetTimeout()で自己を呼び出すようにしているが、処理時間の乖離が大きい。

function countdown( n ) {
  if ( n == 0 ) {
    console.log( "end" );
    console.timeEnd( "timer" );
  } else {
    n--;
    setTimeout( function() {
      countdown( n ); 
    }, 0 );
  }
}

console.log( "start" );
console.time( "timer" );
countdown( 10000 );

// 実行結果
// start
// end
// timer: 40317.000ms

function countdown( n ) {

if ( n == 0 ) {

console.log( "end" );

console.timeEnd( "timer" );

} else {

n--;

setTimeout( function() {

countdown( n );

}, 0 );

}

console.log( "start" );

console.time( "timer" );

countdown( 10000 );

// 実行結果

// start

// end

// timer: 40317.000ms

なお、この方法で関数をsetTimeout()に引き渡す際、引数まで含めて文字列で引き渡そうとするとUncaught ReferenceError: 引数 is not definedとエラーになる。

TauStation

JavaScript – Timer

概要

Dateオブジェクト

setInterval()

起動

引数がある場合

停止

setTimeout()

基本形

起動

タイマとしての利用

停止

補足

実行キュー

スタック・オーバーフローの回避

コメントを残すコメントをキャンセル

概要

Dateオブジェクト

setInterval()

起動

引数がある場合

停止

setTimeout()

基本形

起動

タイマとしての利用

停止

補足

実行キュー

スタック・オーバーフローの回避

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル