JavascriptでsetIntervalでループさせて指定秒数後に停止する例

setIntervalで関数を回して、指定秒数後に止める例です。setInterval, clearInterval, setTimeoutの合わせ技です。いつも忘れるので備忘録的に残しておきます。

jsfiddle (developer toolを開いて実行してください) → https://jsfiddle.net/r94sowe4/

コード

<!DOCTYPE html>
<html>
    <head>
	<title>ボタンを押すと関数がsetIntervalで回され、指定秒数後に停止する例</title>
	<meta charset="UTF-8">
    </head>
    <body>
	<div>
	    <h2>ボタンを押すと関数がsetIntervalで回され、指定秒数後に停止する例</h2>
	    <p>Developer Toolを開いて、ボタンを押してください。</p>
	    <input type="number" name="time" id="time" value="3" min="1" max="100" required> (秒)
	    <br />
	    <input type="button" value="開始" onClick="start();">
	</div>

	<script>
	    var time;
	    var intervalID;

	    function start() {
		time = parseInt(document.getElementById('time').value, 10);

		intervalID = setInterval(loop, 0);
		setTimeout(function () {
		    clearInterval(intervalID);
		    console.log('loop has stopped after ' + (time) + ' sec!');
		}, time * 1000);
	    }

	    function loop() {
		console.log('I am the loop!');
	    }
	</script>
    </body>
</html>

コツとしては、clearIntervalを使いたい場合は、setIntervalを宣言的に使うって感じですかね。