setintervalとsettimeoutと停止処理

繰り返し処理を行うsetintervalと一定時間後に処理を行うsettimeoutの使い方、それぞれの停止方法をいつも忘れてしまうのでまとめておきます。

サンプルコード

まずは、setIntervalとsetTimeoutを普通に使う場合のサンプルです。

JavaScript

var count = 0;
var repeat = setInterval(function() {
	count += 1;
	console.log(count);
}, 1000);

setIntervalのデモページ
　

JavaScript

setTimeout(function() {
	console.log('5秒');
}, 5000);

setTimeoutのデモページ
　

繰り返し処理を行うsetIntervalを停止してみます。

JavaScript

var count = 0;
var actuon = document.getElementById('actuon');
var repeatFlag = true;

var repeat = setInterval(function() {
	count += 1;
	console.log(count);
}, 1000);

actuon.onclick = function() {
	if(repeatFlag) {
		clearInterval(repeat);
		actuon.innerHTML = '再開';
		repeatFlag = false;
	} else {
		repeat = setInterval(function() {
			count += 1;
			console.log(count);
		}, 1000);
		actuon.innerHTML = '停止';
		repeatFlag = true;
	}
};

HTML

<button id="actuon">停止</button>

ボタンをクリックする毎に停止と再開を繰り返します。
clearIntervalのデモページ
　

setTimeoutで処理の停止をする前に、setTimeoutで繰り返し処理を行わせてみます。

JavaScript

var count = 0;

function repeat() {
	count += 1;
	console.log(count);
	setTimeout(repeat, 1000);
}

repeat();

setTimeoutでの繰り返しのデモページ
　

繰り返し処理を行っているsetTimeoutを停止させてみます。

JavaScript

var count = 0;
var actuon = document.getElementById('actuon');
var repeatFlag = true;
var repeat;

function repeatFunc() {
	count += 1;
	console.log(count);
	repeat = setTimeout(repeatFunc, 1000);
}

repeatFunc();

actuon.onclick = function() {
	if(repeatFlag) {
		clearTimeout(repeat);
		actuon.innerHTML = '再開';
		repeatFlag = false;
	} else {
		repeatFunc();
		actuon.innerHTML = '停止';
		repeatFlag = true;
	}
};

HTML

<button id="actuon">停止</button>

ボタンをクリックする毎に停止と再開を繰り返します。
clearTimeoutのデモページ
　

【参考サイト】

• JavaScriptリファレンス – clearTimeout：ITpro