タイマー処理

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

タイマー処理

JSにはタイマー処理という命令が用意されています。
setInterval： 一定時間ごとにある処理を繰り返すという
setTimeout： 一定時間後にある処理を一回だけする

setInterval

最初にsetIntervalについてです。
一定時間ごとに繰り返す処理ができるのでスライドショーや流れる文字をつくるときに使えます。
ただ、無条件で繰り返されるので処理が重すぎると自分の求める動きに追いつかない可能性があります。

<script>
var i = 0;
function show () {
	console.log(i++);
}
setInterval(function(){
	show();
}, 1000);
</script>

1000の部分については何秒ごとに処理を繰り返すかを指定する部分になります。
1秒=1000なので5秒だったら5000になります。

setTimeout

つぎにsetTimeoutについてです。

<script>
  var count = 0;
  var countup = function(){
    console.log(count++);
  } 
  setTimeout(countup, 2000);
</script>
 

これで2秒後に0とコンソールに表示される処理になります。

こちらの場合は前の処理が終わってから動き始めるため、setIntervalのように追いつかないということはおきません。
ただ、このままだと1回だけしか処理ができないので、setTimeoutを使っている状態で
繰り返し処理をする方法について見ていきます。

 <script>
  var count = 0;
  var countup = function(){
    console.log(count++);
    setTimeout(countup, 2000);
  } 
  countup();
</script>

先程外にでていたsetTimeout(countup, 1000);の部分をfunctionの内側にいれるだけでOKです。

ある時間のタイミングで処理を止めたいという場合はclearTimeoutを使います。

<script>
  var count = 0;
  var countup = function(){
    console.log(count++);
    var id = setTimeout(countup, 2000);
    if(count > 4){　
      clearTimeout(id);
    }
  }
  countup();
</script>

これで8秒後に処理がストップします。