JavaScriptで指定時間後に処理を実行するsetTimeoutと、定期的に処理を繰り返すsetIntervalの使い方を初心者向けに解説。キャンセル方法や動くサンプル付き！
JavaScriptでは、一定時間後に処理を実行したり、定期的に繰り返すことができます。
このページでは、setTimeoutとsetIntervalの基本的な使い方から、clearTimeoutやclearIntervalによるキャンセル方法まで、実際に動かせるサンプルコード付きでわかりやすく解説します。
「ボタンを押すと5秒後にアラート」「0.05秒ごとに要素が動く」など、タイマー処理の仕組みを楽しく体験しながら学べます。
Javascriptのタイマー
１度だけのタイマー（setTimeout関数とclearTimeout関数）
タイマーID = setTimeout(実行したい関数, 実行数するまでの時間[ミリ秒]);
関数を使うと指定した時間が経過したら1度だけ関数を実行することができます。
clearTimeout(タイマーID);
を使うとsetTimeoutタイマーをキャンセルすることができます。
指定時間毎のタイマー（setInterval関数とclearInterval関数）
タイマーID = setInterval(実行したい関数, 実行数する間隔[ミリ秒]);
関数を使うと指定した時間が経過する毎に関数を実行することができます。
clearInterval(タイマーID);
関数を使うとsetIntervalタイマーを終了させることができます。
１度だけタイマーを使う（setTimeout関数）
「start1」ボタンを押すと５秒後のタイマーが設定され、「stop1」ボタンを押すとキャンセルされます。
<button id="start1">５秒後にalertが表示されます</button>
<button id="stop1" disabled>5秒以内に押すとalertを中止できます</button>
<script>
var timerId1 = null; //タイマーID用グローバル変数
//DOM(Document Object Model)がロードされたら実行
window.addEventListener("DOMContentLoaded",function(){
//「start1」ボタンが押されたら実行する
document.querySelector("#start1").addEventListener("click",function(){
//5秒経過したら実行する関数
timerId1 = setTimeout(function(){
document.querySelector("#start1").removeAttribute("disabled");
document.querySelector("#stop1").setAttribute("disabled","");
alert("５秒経過しました");
},5000);
document.querySelector("#start1").setAttribute("disabled","");
document.querySelector("#stop1").removeAttribute("disabled");
});
//「stop1」ボタンが押されたら実行する
document.querySelector("#stop1").addEventListener("click",function(){
clearTimeout(timerId1);
document.querySelector("#start1").removeAttribute("disabled");
document.querySelector("#stop1").setAttribute("disabled","");
});
});
</script>
指定間隔毎のタイマーを使う（setInterval関数）
「start2」ボタンを押すと０．０５秒毎のタイマーが設定され、「stop2」ボタンを押すとキャンセルされます。
<button id="start2">0.05秒毎に動きます</button>
<button id="stop2" disabled>停止します</button>
<div style="position:relative;">
<div id="elm2" style="position:absolute;">ここが動きます</div>
</div>
<script>
var timerId2 = null; //タイマーID用グローバル変数
var x=0, y=0, dx=2, dy=1; //座標用グローバル変数
//DOM(Document Object Model)がロードされたら実行
window.addEventListener("DOMContentLoaded",function(){
//「start2」ボタンが押されたら実行する
document.querySelector("#start2").addEventListener("click",function(){
document.querySelector("#start2").setAttribute("disabled","");
document.querySelector("#stop2").removeAttribute("disabled");
timerId2 = setInterval(function(){
x += dx;
y += dy;
if(x>100 || x<0){
dx = -dx;
x +=dx;
}
if(y>20 || y<0){
dy = -dy;
y +=dy;
}
document.querySelector("#elm2").style.left = x + "px";
document.querySelector("#elm2").style.top = y + "px";
},50);
});
//「stop2」ボタンが押されたら実行する
document.querySelector("#stop2").addEventListener("click",function(){
clearTimeout(timerId2);
document.querySelector("#start2").removeAttribute("disabled");
document.querySelector("#stop2").setAttribute("disabled","");
});
});
</script>
ここが動きます
指定間隔毎のタイマーを使う（setInterval関数）その２
「start3」ボタンを押すと０．０３秒毎のタイマーが設定され、「stop3」ボタンを押すとキャンセルされます。
<button id="start3">0.05秒毎に動きます</button>
<button id="stop3" disabled>停止します</button>
<div style="position:relative;height:8em;">
<div id="e0" style="position:absolute;left:0em;">こ</div>
<div id="e1" style="position:absolute;left:1em;">こ</div>
<div id="e2" style="position:absolute;left:2em;">が</div>
<div id="e3" style="position:absolute;left:3em;">動</div>
<div id="e4" style="position:absolute;left:4em;">き</div>
<div id="e5" style="position:absolute;left:5em;">ま</div>
<div id="e6" style="position:absolute;left:6em;">す</div>
</div>
<script>
var timerId3 = null; //タイマーID用グローバル変数
var pos=[{y:0, dy:-0.0},{y:0, dy:-0.4},{y:0, dy:-0.0},{y:0, dy:-0.4},{y:0, dy:-0.0},{y:0, dy:-0.4},{y:0, dy:-0.0},{y:0, dy:-0.4},]; //座標用グローバル変数
//DOM(Document Object Model)がロードされたら実行
window.addEventListener("DOMContentLoaded",function(){
//「start3」ボタンが押されたら実行する
document.querySelector("#start3").addEventListener("click",function(){
document.querySelector("#start3").setAttribute("disabled","");
document.querySelector("#stop3").removeAttribute("disabled");
timerId3 = setInterval(function(){
for(let i=0;i<7;i++){
pos[i].dy += 0.1;
pos[i].y += pos[i].dy;
if(pos[i].y>40){
pos[i].dy = -pos[i].dy;
pos[i].y +=pos[i].dy;
}
document.querySelector("#e"+i).style.top = pos[i].y + "px";
}
},30);
});
//「stop3」ボタンが押されたら実行する
document.querySelector("#stop3").addEventListener("click",function(){
clearTimeout(timerId3);
document.querySelector("#start3").removeAttribute("disabled");
document.querySelector("#stop3").setAttribute("disabled","");
});
});
</script>
こ
こ
が
動
き
ま
す