jQueryでn秒後に処理を実行する方法|setTimeout()

この記事は約4分で読めます。
スポンサーリンク

jQueryで少し待ってから処理を実行する方法のご紹介です。

	setTimeout(function() {
		// 1秒(1000ms)後に処理
	}, 1000);

これで1秒(1000ms)後に処理が実行される。
もし「setTimeout()」を使って、繰り返し処理を実行する場合は下記の様に記述します。
繰り返し処理を行う場合は、合わせて止める処理も記述しましょう。

	var set;
	var repeat = function() {
		// 1秒(1000ms)後に処理
		set = setTimeout(repeat, 1000);
	}
	repeat();

	// setTimeout()のクリア条件を設定し実行
	$(".btn").on("click", function() {
		clearTimeout(set);
	});

次のデモでsetTimeout()をクリアしよう!
ボタンを押すとカウントが停止し、「再開する」を押すとまたカウントがスタートします。
ソースは下にありますので、よければご利用ください!

0

停 止

再開する

HTML

<div class="demo1">
	<p>0</p>
	<span>停 止</span>
	<article>再開する</article>
</div>

jQuery

var set;
var num = 0;
var repeat = function() {
	// 0.1秒(100ms)毎に処理
	$(".demo1 p").text(num++);
	set = setTimeout(repeat, 100);
}

// setTimeout()スタート
repeat();

$(".demo1 span").on("click", function() {
	// setTimeout()のクリア
	clearTimeout(set);
	$(".demo1 article").show();
});

$(".demo1 article").on("click", function() {
	// setTimeout()再開
	repeat();
	$(".demo1 article").hide();
});

CSS

.demo1 {
	position: relative;
	background: #4d5858;
	border-radius: 12px;
	box-shadow: 4px 4px 16px -2px rgba(0,0,0,.3) inset;
	padding: 48px 0 70px;
	color: #fff;
	text-align: center;
	margin: 24px auto;
}
.demo1 p {
	font-size: 32px;
	font-weight: bold;
	margin: 0 auto 24px;
	text-shadow: 3px 4px 3px rgba(0,0,0,.5);
}
.demo1 span {
	font-weight: bold;
	font-size: 20px;
	width: 115px;
	padding: 8px 0;
	margin: 0 auto;
	display: block;
	text-align: center;
	background: #00d9b8;
	border-radius: 80px;
	box-shadow: 0 15px 23px -12px rgba(0,0,0,.6);
	color: #313939;
	display: block;
	cursor: pointer;
	-webkit-transition: .4s;
	transition: .4s;
}
.demo1 span:hover {
	background: #84f2e1;
	color: #4d5858;
}
.demo1 article {
	position: absolute;
	bottom: 30px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	font-size: 14px;
	font-weight: 100;
	margin-top: 20px;
	display: inline-block;
	text-decoration: underline;
	cursor: pointer;
	display: none;
}
.demo1 article:hover {
	opacity: .4;
}
SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました