国名入力ゲーム(11/16)タイマー（インターバル）

今回は定期的に処理を実行させる方法について学んでいきます。

javascriptによる定期実行処理の書き方

『定期的な実行』という言葉にピンと来ない方も多いと思うので、簡単な説明です。
定期的に実行するといのは、一定の間隔で処理を繰り返すことです。
例えば１時間毎に鐘を鳴らす時計なんかがそうですね。
このように、一定の時間経過後に処理を繰り返すことを定期実行と呼びます。
今回はこの定期実行の方法を学んでいきます。

まずは定期実行のサンプルを動かしてみます。
次のコードを実行してみてください。

setInterval( alert, 3000,　'アラート' );

1	setInterval( alert, 3000,　'アラート' );

3秒ごとにアラートが表示されますよね。
setIntervalを利用することで、指定した時間のたびに
指定された関数を実行します。
setIntervalの括弧内の左側が実行したい関数名、次が実行する間隔(ミリセカンド)
そのあとが、引数です。
今回はalertに’アラート’という文字列を表示させるためにアラートと書きました。setIntervalに設定した関数に引数がない場合は３番目の引数は省略することも可能です。

また、今回はalert関数を利用しましたが、自分で作成した関数を繰り返すこと可能です。

自分で作成した関数を定期実行する場合は
書き方に注意が必要です。
実際にどのように記述するか確認して見ましょう。

var i = 0
var hensu = function (){
  console.log(i++);
}

var jikkou = setInterval( hensu, 3000);

var i = 0

var hensu = function (){

console.log(i++);

}

var jikkou = setInterval( hensu, 3000);

alertと違う部分は関数を変数に入れているというところです。
変数をsetIntervalにセットすることで自作の関数を利用することができます。
実際に上のプログラムをコンソールに入力して動作を確認して見ましょう。

3秒ごとにカウントアップするプログラムを作成してください
ヒント：1ずつプラスして行く関数を定期的に呼び出すようにしてください。

止め方

setIntervalは止めない限りは処理を繰り返し続けてしまうので
止める処理を書く必要があります。
setIntervalの処理を止める場合は以下の命令文を利用します。

clearInterval(繰り返し名)

1	clearInterval(繰り返し名)

setしたものをclearするということです。
ここで引数で指定している『繰り返し名』というのがよくわからないと思います。これは、繰り返しの処理が入った変数名です。
どういうことかというと、実はsetIntervalの内容を変数に入れるということです。
次のプログラムをみてください。

var i = 0

//『hensu』という変数に関数を入れる
var hensu = function(){
  console.log(i++);
}

//setIntervalでhensuを実行する（function countup()が
//jikkouという名前で実行される

var jikkou = setInterval( hensu, 3000);

var i = 0

//『hensu』という変数に関数を入れる

var hensu = function(){

console.log(i++);

}

//setIntervalでhensuを実行する（function countup()が

//jikkouという名前で実行される

var jikkou = setInterval( hensu, 3000);

関数を変数に格納している部分は、先ほどのサンプルと同じです。
次にsetIntervalの部分で変数「jikkou」に繰り返し処理を格納しています。
実際にこのプログラムを実行すると繰り返し処理が行われて行きます。
この時の繰り返しの名前がjikkouになります。

ですので、繰り返し処理を停止させる場合は繰り返しの名前を指定すれば良いので

clearInterval(jikkou);

1	clearInterval(jikkou);

となります。
実際にコンソールから実行した繰り返し処理を
clearIntervalで停止させて見ましょう。

これまで説明した定期繰り返し処理を
プログラムの一連の流れを書くと次のようになります。

i = 10     //カウント用変数

//定期処理停止用関数
function cL(name){
    alert();
	clearInterval(name);
}

//繰り返し処理の名前付け
//停止条件を書いて、条件を満たす場合に
//cL関数で定期処理停止関数を実行する。
var hensu = function (){
  console.log(i--);
  if(i<0){
    cL(jikkou)
  }
}

//繰り返し実行の開始
var jikkou = setInterval( hensu, 1000);