【JavaScript】n秒毎に処理を実行する方法(setInterval)

2023年1月28日2023年7月17日

本記事では、JavaScriptでn秒毎に処理を実行する方法について解説しています。

JavaScriptの学習におすすめ書籍

1冊ですべて身につくJavaScript入門講座

総合評価

( 5 )

メリット

誰でも分かるように嚙み砕いて説明してくれる
アニメーションの知識が深く学べる
1つのWebサイトを作りながら学べる

1冊ですべて身につくJavaScript入門講座 [ Mana ]

楽天ブックス

¥2,794 （2024/04/21 02:09時点 | 楽天市場調べ）

Amazonで探す

＼楽天ポイント5倍セール！／

楽天市場で探す

＼ポイント5%還元！／

Yahoo!ショッピングで探す

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

Amazon Kindle Unlimited

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

美しいコードが書けるが自然と書けるようになる
他の開発者が理解しやすいコードになる

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤功平, 翻訳:角征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

Amazonで探す

＼楽天ポイント5倍セール！／

楽天市場で探す

＼ポイント5%還元！／

Yahoo!ショッピングで探す

ポチップ

setIntervalメソッド

n秒毎に処理を実行するには「setIntervalメソッド」を使用します。基本的な使い方は以下のとおりです。

setInterval(function, delay);

function：実行させたい処理を記述
delay：処理の実行間隔をミリ秒 (1/1000 秒) 単位で指定。1秒間隔で処理を実行させたい場合は「1000」を指定する。

delayは省略することも可能です。delayの最小値は「10」と決まっているため、10未満の数値を設定した場合は内部的に最小値の「10」が設定されます。

サンプルコード

setIntervalメソッドを使ったサンプルコードを用意しました。内容は1.5秒間隔でコンソールログに数値を出力する簡単なものです。

/* 関数を分ける記述 */
let num = 0;
const logNum = () => console.log(num++);
setInterval(logNum, 1500);

/* 関数をまとめて記述 */
let num = 0;
setInterval(() => {
    console.log(num++);
},1500);

先輩くん

setIntervalメソッドをキャンセルする方法は別記事で解説しているよ！