JavaScriptで一定時間ごとに同じ処理を繰り返す方法/setIntervalメソッドの使い方

setInterval()を使うと、決まった処理を一定時間ごとに永遠に繰り返すことができます。

setIntervalの使い方

setInterval()はメソッドです。オブジェクトを書くとwindow.setInterval()のようになりますが、alertなどと同じく省略が可能です。

一定時間で同じ処理を繰り返す
setInterval(関数,間隔);
※間隔は数字で指定、1000 = 1秒換算

因数に関数と間隔を指定しておき、間隔ごとに関数が実行されるようにすることができます。
なので、先に実行されると数字が1増えて出力される関数one_upを作っておきます。

//JavaScript

//数字を1ずつ増やす変数iを作成し、初期値を0にセット
var i = 0;
//var 関数名 = function(){}で関数作成
var one_up = function(){
//変数iが1増える
i++;
//ID「output」を持つ要素をhtmlから取得
shutsuryoku = document.getElementById("output");
//上で取得した要素にiを出力
shutsuryoku.innerHTML = i;
}

ここまでを実行すると次のようになります。

ボタンを押すと数字が1ずつ上がっていくことが確認できました。
あとはこの関数「one_up」を、setIntervalを使って1秒ごとに実行されるようにするだけです。
今まではクリックするとone_upを実行していたボタンを、クリックするとsetIntervalが実行されるように変更します。

<！-- html -->

<！-- クリックするとtimer_startメソッドを実行 -->
<input type="button" value="実行" onclick="timer_start();"/>

//JavaScript

var timer_start = function(){
//1/1000秒に1回one_upメソッドを実行
setInterval(one_up,1000);
}

下のボタンを押すと、さっきクリックするごとに1増えていた数字が1秒に1ずつ増えることが確認できます（上に戻って確認してください）。

とりあえずsetIntervalについては以上です。