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

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()をクリアしよう！
ボタンを押すとカウントが停止し、「再開する」を押すとまたカウントがスタートします。
ソースは下にありますので、よければご利用ください！

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;
}