1ヶ月前に投稿

JavaScriptの setInterval() を使ってみた

この記事は約 4 分で読めます。

4.5

setInterval()でカウントダウンタイマーを
作ってみましたが、
その時調べた備忘録です。

setInterval() とは

setInterval()は、
一定時間が経過するごとに処理を実行する際に使用するもので、
経過する時間はミリ秒 (1秒=1000) で指定するそうです。
そして、
setInterval()でセットしたタイマーを解除する際には、
clearInterval()を使用するそうです。

ちなみに、
一定時間経過後に処理を一回だけ実行する際には、
setTimeout()というものがあるらしい。

  • setInterval()
    一定時間が経過するごとに処理を実行する。
  • setTimeout()
    一定時間経過後に処理を一回だけ実行する。
  • clearInterval()
    setInterval()でセットしたタイマーを解除する。
  • clearTimeout()
    setTimeout()でセットしたタイマーを解除する。

こんな感じに使うらしい

const id = setInterval(function () {
  //ここに処理
}, 1000);
 
clearInterval(id);

これでは止まらない

//実行される度に1ずつ増やして出力
let s = 0;
function cnt(){
	s++;
  document.getElementById("exect").innerHTML = s+"秒";
}

//1000ms毎にcnt()を実行
const cntexe = setInterval(function(){
  cnt();
}, 1000);

//10秒を超えたら停止
if (s > 10){
  clearInterval(cntexe);
   document.getElementById("exect").innerHTML = 'Stop';
}

こう書くのが正解らしい

HTML

<div id="exect"></div>

JavaScript

//実行される度に1ずつ増やして出力
let s = 0;
function cnt() {
  s++;
  document.getElementById("exect").innerHTML = s + "秒";
}
//1000ms毎にcnt()とif文を実行
const cntexe = setInterval(function () {
  cnt();
  //10秒を超えたら停止
  if (s > 10) {
    clearInterval(cntexe);
    document.getElementById("exect").innerHTML = 'Stop';
  }
}, 1000);

結果

注意点

cnt()ifより後にしてしまうと、
余分にカウントされてしまう。

カウントダウンタイマー

JavaScript

結果

参考文献

最後に

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

JavaScriptの setInterval() を使ってみた