JavaScript | 指定時間後、数秒後にリダイレクトする方法

2021-07-092021-12-09JavaScript 制御,JavaScript

JavaScriptで指定時間後、数秒後にページをリダイレクトするイベントを実装する方法を紹介ししています。

setTimeout()で数秒後にリダイレクトする方法

JavaScriptのsetTimeout()を利用して数秒後に別のページにリダイレクトさせるサンプルコードです。

See the Pen JavaScript Horizontal bar graph by yochans (@yochans) on CodePen.

<p>5秒後にリダイレクトします</p>

setTimeout()で指定する時間はミリ秒単位です。（1秒＝1000ミリ秒）

setTimeout(function () {
	window.location = 'https://1-notes.com/category/css/css-shape-design/';
}, 5000);

アロー関数バージョン

setTimeout(() => {
	window.location = 'https://1-notes.com/category/css/css-shape-design/';
}, 5000);

requestAnimationFrameで数秒後にリダイレクトする方法

requestAnimationFrame()メゾッドを使って数秒後にリダイレクトするサンプルコードになります。

requestAnimationFrame()で得られるタイムスタンプを利用して5秒（5000ミリ秒）経過後にページをリダイレクトします。

function update(timestamp) {

	if (timestamp > 5000) {
		window.location = 'https://1-notes.com/category/css/css-shape-design/';
	} else {
		// 5000秒以内は繰り返す
		window.requestAnimationFrame(update);
	}

}

window.requestAnimationFrame(update);

アロー関数バージョン

const update = timestamp => {

	if (timestamp > 5000) {
		window.location = 'https://1-notes.com/category/css/css-shape-design/';
	} else {
		// 5000秒以内は繰り返す
		window.requestAnimationFrame(update);
	}

};

window.requestAnimationFrame(update);